© Kademi 2022
jQuery Forms v1.1.0
Change logs
- New option for duration of confirm message: confirmMessageDuration
-
New options for error messages:
- networkErrorMessage
- emailErrorMessage
- requiredErrorMessage
- dateErrorMessage
- passwordErrorMessage
- confirmPasswordErrorMessage
- simpleCharsErrorMessage
- numericErrorMessage
- hrefErrorMessage
- phoneErrorMessage
- Support function type for options validationMessageSelector
- New option for all animation duration: animationDuration
- New option for rendering message wrapper: renderMessageWrapper. Message wrapper is an element which will contain all messages of form
- New option for rendering error message: renderErrorMessage
-
New return type for validate
-
{ error: Number, errorFields: Array, errorMessages: Array }
-
- New callback before posting data form to server: beforePostForm
- Rename error to onInvalid
- Rename callback to onSuccess
- Rename errorHandler to onError
- Rename doPostForm to allowPostForm
- Rename valiationMessageSelector to validationMessageSelector
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. |
Default Configuration
{ postUrl: null, // means to use the form action as url validate: function (form, config) { flog('[jquery.forms] Default validate of v1.1.0', form, config); return { error: 0, errorFields: [], errorMessages: [] } }, onValid: function (form, config) { flog('[jquery.forms] Default onValid of v1.1.0', form, config); }, onInvalid: function (form, config) { flog('[jquery.forms] Default onInvalid of v1.1.0', form, config); }, allowPostForm: true, beforePostForm: function (form, config, data) { flog('[jquery.forms] Default beforePostForm of v1.1.0', form, config, data); return data; }, onSuccess: function (resp, form, config) { flog('[jquery.forms] Default onSuccess of v1.1.0', 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', animationDuration: 150, renderMessageWrapper: function (messageContent, type) { return '<div class="form-message alert alert-' + type + '" style="display: none"><a class="close" data-dismiss="alert">×</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>'; } }
Hide comments