🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

NiceForm is a robust and customizable jQuery plugin which can be used to validate a various type of form fields and send the form data to server side via AJAX requests.

Form-Validation ajax-form

Documentation

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 .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=validate for your fields
  • You can combined Required rule with other rules
  • All rules except Required will 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
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


You May Also Like