Jquery.niceform NPM

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`
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, ...);

var niceform = $('#form-id').niceform(options); // Get NiceForm instance when initializing
niceform.methodName(param1, param2, ...);

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!" />