NiceForm
The jQuery plugin for validation and post form data to server (http://ducdhm.github.io/jquery.niceform/)
Shortcuts
Dependencies
Rules
| Name | Selector | Description |
|---|---|---|
| Required | .required |
Invalid when value of field is blank or same as placeholder attribute |
| Date | .date |
Invalid when value of field is not matched with locale.date format from configuration |
| Time | .time |
Invalid when value of field is not matched with locale.time format from configuration |
| DateTime | .datetime |
Invalid when value of field is not matched with locale.datetime format from configuration |
.email |
Invalid when value of field is not matched with regex.email regular expression from configuration |
|
| Number | .number |
Invalid when value of field is not number/digit/numeric |
| Url | .url |
Invalid when value of field is not matched with regex.url regular expression from configuration |
| Password | .password |
Invalid when value of field is not matched with password from configuration |
| Repassword | .repassword |
Invalid when value of field is not matched with .password field |
| Regex | .regex |
Invalid when value of field is not matched with data-regex regular expression from attribute of field. Error message of this rule will be specified in data-regex-message attribute |
| Regex | .simple |
Invalid when value of field is not matched with regex.url regular expression from configuration |
| Regex | .really-simple |
Invalid when value of field is not matched with regex.url regular expression from configuration |
Note:
- You can ignore validation rules by using
data-ignore=validatefor your fields - You can combined
Requiredrule with other rules - All rules except
Requiredwill be validated if value of field is not blank
Configuration
| Option | Type | Description |
|---|---|---|
| postFormEnabled | Boolean | Allow NiceForm post form data to server by using AJAX or not. Default: true |
| postUrl | String | URL to post form data. Default: null |
| ajax | Object | AJAX options to post form data Default: { type: 'POST', dataType: 'JSON' } |
| password | Object | Password validator options. Default: source code |
| regex | Object | Regular expression options. Default: source code |
| animationDuration | Number | Animation duration in millisecond. Default: 200 |
| locale | Object | Locale options. Default: source code |
| validate | Function | Function to validate the form fields which are not in built-in list. Need to return array of invalid fields or null if valid. Default: null. Params: form and options. Return: `Array |
| showError | Function | Function to show error states when form is invalid. Default: source code. Params: form, errorFields and options |
| hideError | Function | Function to hide error states before validating form. Default: source code. Params: form, errorFields and options |
| processAjaxResponse | Function | Function to process ajax response from server to decide response is success or not. Default: source code. Params: resp, form, and options. Return: Boolean |
| onValid | Function | Callback will be called when form is valid. Default: null. Params: form and options |
| onInvalid | Function | Callback will be called when form is invalid. Default: null. Params: form and options |
| onBeforeValidate | Function | Callback will be called before validating form. Default: null. Params: form and options |
| onBeforeSerializeForm | Function | Callback will be called before serializing form. Default: null. Params: form and options |
| onBeforePostForm | Function | Callback will be called before posting form. Default: null. Params: form and options |
| onAjaxSuccess | Function | Callback will be call if processAjaxResponse return true. Default: source code. Params: resp, form and options |
| onAjaxError | Function | Callback will be call if processAjaxError return false or $.ajax gets error or an unknown issue occurs. Default: source code. Params: jqXhr, form and options |
Methods
| Name | Params (ParamType: paramName) | Description |
|---|---|---|
| clearValue | String: controlSelector | Clear value, uncheck and set selected index is -1 of all text boxes, textareas, select boxes, radio buttons, checkboxes or provided controlSelector.NOTE: Not effect with element data-ignore="clear" |
| enableForm | Enable all form controls include textbox, textarea, select box, radio button, checkbox and button. NOTE: Set readonly=false for all elements which do not contain data-origin-readonly |
|
| disableForm | Disable all form controls include textbox, textarea, select box, radio button, checkbox and button. NOTE: Set readonly=true and data-origin-readonly=true for elements which are readonly as default |
|
| showMessage | String: type String: title String: message |
Built-in message method of NiceForm. type can be success, info, warning, error or danger |
| showSuccessMessage | String: message | Shortcut of showMessage with type is success and title is Success! |
| showErrorMessage | String message | Shortcut of showMessage with type is error and title is Error! |
| hideMessage | Hide built-in message | |
| getOptions | Get options/configuration of NiceForm | |
| showElement | jQuery: element | Show specified element with fadeIn and slideDown effects |
| hideElement | jQuery: element | Hide specified element with fadeOut and slideUp effects |
Note: There are many ways to call method
$('#form-id').niceform('methodName', param1, param2, ...);
or
var niceform = $('#form-id').niceform(options); // Get NiceForm instance when initializing
niceform.methodName(param1, param2, ...);
or
var niceform = $('#form-id').data('niceform'); // Get NiceForm instance via `data` attribute
niceform.methodName(param1, param2, ...);
Custom message
To custom message for a specified field, just need data-${rule}-message attribute. Example:
<input type="text" class="required email" name="email" data-required-message="Email address is mandatory!" data-email-message="Email address is invalid!" />
License
Please read at here
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
1 Feb 5, 2022
4 Sep 26, 2021
33 Jun 28, 2022
7 Jul 31, 2022
6 Jul 12, 2022
2 Apr 24, 2022
159 Dec 10, 2022