jQuery Forms v1.1.1

jQuery Plugn Macros

Change logs

 

DEPRECATED options (will be removed in 1.2.0):

  • "doPostForm" is DEPRECATED and removed. Use "allowPostForm" instead
  • "error" is DEPRECATED. Use "onInvalid" instead
  • "callback" is DEPRECATED. Use "onSuccess" instead
  • "errorHandler" is DEPRECATED. Use "onError" instead
  • "valiationMessageSelector" is DEPRECATED. Use "validationMessageSelector" instead

 

Configuration

Name Type Description
postUrl String Url which will post form data to. If null, will use 'action' attribute of form
validate Function Custom validation method. Arguments are 'form' and 'config'. 'form' is jQuery object form and 'config' is configuration of current form. Can return 'boolean' for result of validation or return object contains total error, list of error fields and list of error messages with format '{{error: Number, errorFields: Array, errorMessages: Array}}'
onValid Function Callback will be called when all fields are valid. Arguments are 'form' and 'config'. 'form' is jQuery object form and 'config' is configuration of current form
onInvalid Function Callback will be called when all fields are invalid. Arguments are 'form' and 'config'. 'form' is jQuery object form and 'config' is configuration of current form
allowPostForm Boolean Allow post form data via AJAX automatically or not
beforePostForm Function Callback will be called before posting form data to server. Arguments are 'form', 'config', 'data'. 'form' is jQuery object form, 'config' is configuration of current form and 'data' is form data. This callback MUST return the data for posting to server
onSuccess Function Callback will be called when post data form to server successfully. Arguments are 'resp', 'form' and 'config'. 'resp' is response data from server, 'form' is jQuery object form and 'config' is configuration of current form
onError Function Callback will be called when post data form to server failed. Arguments are 'resp', 'form' and 'config'. 'resp' is response data from server, 'form' is jQuery object form and 'config' is configuration of current form
confirmMessage String The confirmation message after posting data fom to server successfully
confirmMessageDuration Number The displaying time of confirm message before it's hidden
validationMessageSelector String|Function Selector of validation message. It's can be function which will return jQuery object of validation message
networkErrorMessage String The error network message
emailErrorMessage String The error message when email fields are invalid
requiredErrorMessage String The error message when required fields are invalid
dateErrorMessage String The error message when date fields are invalid
passwordErrorMessage String The error message when password fields are invalid
confirmPasswordErrorMessage String The error message when confirmPassword fields are invalid
simpleCharsErrorMessage String The error message when simpleChars fields are invalid
numericErrorMessage String The error message when numeric fields are invalid
hrefErrorMessage String The error message when url fields are invalid
phoneErrorMessage String The error message when phone fields are invalid
animationDuration Number The speed of all animations in jquery.forms
renderMessageWrapper Function The render method for message wrapper in jquery.forms. Arguments are 'messageContent' and 'type'. 'messageContent' is message content. 'type' can be 'danger', 'success', 'info' and 'warning'.
renderErrorMessage Function The render method for error messages in jquery.forms. Arguments are 'message'. 'message' is message content, can be string or array.
phoneRegionCode String Region code for phone validation
phoneCarrierCode String Carrier code for phone validation

 

Default Configuration

{
    postUrl: null, // means to use the form action as url
    validate: function (form, config) {
        flog('[jquery.forms] Default validate of v1.1.1', form, config);

        return {
            error: 0,
            errorFields: [],
            errorMessages: []
        }
    },
    onValid: function (form, config) {
        flog('[jquery.forms] Default onValid of v1.1.1', form, config);
    },
    onInvalid: function (form, config) {
        flog('[jquery.forms] Default onInvalid of v1.1.1', form, config);
    },
    allowPostForm: true,
    beforePostForm: function (form, config, data) {
        flog('[jquery.forms] Default beforePostForm of v1.1.1', form, config, data);

        return data;
    },
    onSuccess: function (resp, form, config) {
        flog('[jquery.forms] Default onSuccess of v1.1.1', resp, form, config);
    },
    onError: function (resp, form, config) {
        try {
            flog('[jquery.forms] Status indicates failure', resp);

            if (resp) {
                if (resp.messages && resp.messages.length > 0) {
                    showErrorMessage(form, config, resp.messages);
                } else {
                    showErrorMessage(form, config, 'Sorry, we could not process your request');
                }

                showFieldMessages(resp.fieldMessages, form);
            } else {
                showErrorMessage(form, config, 'Sorry, we could not process your request');
            }
        } catch (e) {
            flog('[jquery.forms] Error!', e);
        }
    },
    confirmMessage: null,
    confirmMessageDuration: 5000,
    validationMessageSelector: '.form-message',
    networkErrorMessage: 'Sorry, there appears to be a problem with the network or server. Please check your internet connection. If you\'re connected ok this might be a glitch in the system.',
    emailErrorMessage: 'Please check the format of your email address, it should read like ben@somewhere.com',
    requiredErrorMessage: 'Please enter all required fields',
    dateErrorMessage: 'Please enter valid date',
    passwordErrorMessage: 'Your password must be at least 6 characters and it must contain numbers and letters',
    confirmPasswordErrorMessage: 'Please confirm your password',
    simpleCharsErrorMessage: 'Please use only letters, numbers, underscores, dashes and spaces',
    reallySimpleCharsErrorMessage: 'Please use only letters and numbers, no punctuation, dots, etc',
    numberErrorMessage: 'Please enter digits',
    hrefErrorMessage: 'Please enter valid website address',
    phoneErrorMessage: 'Please enter valid phone number',
    animationDuration: 150,
    renderMessageWrapper: function (messageContent, type) {
        return '<div class="form-message alert alert-' + type + '" style="display: none"><a class="close" data-dismiss="alert">&times;</a>' + messageContent + '</div>';
    },
    renderErrorMessage: function (message) {
        if (typeof message === 'string') {
            message = [message];
        }

        var htmlMessages = '';
        for (var i = 0; i < message.length; i++) {
            htmlMessages += '<li>' + message[i] + '</li>';
        }

        return '<ul class="error-message">' + htmlMessages + '</ul>';
    },
    phoneRegionCode: defaultRegionCode,
    phoneCarrierCode: ''
}