Form Validation & AJAX Submit Plugin - jQuery NiceForm

File Size: 1.32 MB
Views Total: 7139
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Form Validation & AJAX Submit Plugin - jQuery NiceForm

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.

More features:

  • 10+ built in validation rules.
  • Custom error messages.
  • Useful methods and callbacks.

Basic usage:

1. Download and load the NiceForm's script jquery.niceform.js after jQuery.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.niceform.js"></script>

2. Load the Moment.js to validate dates & times (OPTIONAL).

<script src="/path/to/moment.min.js"></script>

3. Add validation rules to form fields using the following CSS helpers:

  • .required: required field
  • .date: checks if the field matches the date format
  • .time: checks if the field matches the time format
  • .datetime: checks if the field matches the datetime format
  • .email: checks if is an valid email
  • .number: checks if is a number
  • .url: checks if is a valid URL
  • .password: checks if is a valid password
  • .repassword: checks if the field matches the password
  • .regex: checks if the field matches the data-regex attribute
  • .simple: checks if the field matches the SIMPLE regex defined in the JavaScript
  • .really-simple: checks if the field matches Really-SIMPLE regex defined in the JavaScript
<form action="." id="myForm">
  <input type="text" name="username" id="username" class="really-simple">
  <input type="password" name="password" id="password" class="password">
  <input type="password" name="repassword" id="repassword" class="repassword">

4. Attach the plugin to the HTML form.

  // options here

5. All possible options to config the plugin.


  // enables ajax form submit
  postFormEnabled: true,

  // url to post form data
  postUrl: null,

  // ajax options 
  ajax: { type: 'POST', dataType: 'JSON' },

  // options for the password validator
  password: {
    // Minimum length for password field
    min: 6,
    // Maximum length for password field
    max: 32,
    // Number of required special character for password field
    specialLength: 1,
    // Number of required uppercase letter for password field
    uppercaseLength: 1,
    // Number of required number for password field
    numberLength: 1

  // options for the Regex validator
  regex: {
    // Regular expression for ".email" field
    email: /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/,
    // Regular expression for ".url" field
    url: /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/,
    // Regular expression for ".simple" field
    simple: /^[a-zA-Z0-9]+(?:[-_\s][a-zA-Z0-9]+)*$/,
    // Regular expression for ".really-simple" field
    reallySimple: /^[a-zA-Z0-9]+$/

  // the duration of the animation
  animationDuration: 200,

  // localization
  locale: {
    // The format of ".date" field
    date: 'DD/MM/YYYY',
    // The format of ".time" field
    time: 'HH:mm',
    // The format of ".datetime" field
    datetime: 'DD/MM/YYYY HH:mm',
    // Title of success message when submitting form successfully
    successTitle: 'Success!',
    // Content of success message when submitting form successfully
    successMessage: 'The form has been successfully submitted',
    // Title of error message when form is invalid or error in submitting form
    errorTitle: 'Error!',
    // Content of error message when form is invalid
    invalidErrorMessage: 'Please correct your invalid fields!',
    // Error message for ".required" field
    requiredErrorMessage: 'This field is required',
    // Error message for ".date" field
    dateErrorMessage: 'Please check the format of your date, it should be like 14/02/2000',
    // Error message for ".time" field
    timeErrorMessage: 'Please check the format of your time, it should be like 14:02',
    // Error message for ".datetime" field
    datetimeErrorMessage: 'Please check the format of your date time, it should be like 14/02/2000 14:02',
    // Error message for ".email" field
    emailErrorMessage: 'Please check the format of your email address, it should read like [email protected]',
    // Error message for ".number" field
    numberErrorMessage: 'Please enter only numbers',
    // Error message for ".url" field
    urlErrorMessage: 'Please enter valid website address',
    // Error message for ".password" field
    passwordErrorMessage: 'Your password must be at least 6 characters and it must contain numbers, letters (lowercase and uppercase) and at least 1 special character',
    // Error message for ".repassword" field
    repasswordErrorMessage: 'Please confirm your password',
    // Error message for ".simple" field
    simpleErrorMessage: 'Please enter only letters, numbers and only 1 underscore or dash or space between letters and numbers',
    // Error message for ".really-simple" field
    reallySimpleErrorMessage: 'Please enter only letters and numbers, no punctuation, dots, etc',
    // Error message when unknown issue occurs
    unknownErrorMessage: 'Sorry, an error occurred attempting to submit the form. Please contact the site administrator to resolve!',

  // used to create your own form validators
  // Params: form and options
  validate: null,

  // used to show error states when your form is invalid. 
  // Params: form, errorFields and options
  showError: {
    form.niceform('showErrorMessage', options.locale.invalidErrorMessage);
    errorFields.forEach(function (field) {
        showErrorField(form, field, field.attr('data-error-message'));

  // used to hide error states before validating the form
  hideError: {
    form.find('.is-invalid').removeClass('is-invalid').attr('data-error-message', '');
    form.niceform('hideElement', form.find('.nf-error-message'));

  // used process ajax response from server
  // Params: resp, form, and options. 
  // Return: Boolean
  processAjaxResponse: null


6. Callback functions.


  onValid: function(form, options){
    // do something

  onInvalid: function(form, options){
    // do something

  onBeforeValidate: function(form, options){
    // do something

  onBeforeSerializeForm: function(form, options){
    // do something

  onBeforePostForm: function(form, options){
    // do something

  onAjaxSuccess: function(resp, form, options){
    // do something

  onAjaxError: function(jqXhr, form, options){
    // do something


7. API methods.

var instance = $('#myForm').niceform();

// enables the form

// disables the form

// clears the value from a specific form field

// type: success, info, warning, error or danger
instance.showMessage(type, title, message);

// Shortcuts

// hides the error message

// gets options

// shows/hides element

8. You can also customize the error message for each form field using data-RULE-message attributes.

<input type="text" class="required email" name="email" data-required-message="Email address is mandatory!" data-email-message="Email address is invalid!" /> 


v1.1.9 (2020-09-22)

  • Use new API for checking URL

v1.1.8 (2020-09-11)

v1.1.7 (2020-08-21)

  • Support "onBeforeValidate" callback

v1.1.6 (2020-07-12)

  • Bugfix

v1.1.3 (2020-05-07)

  • Update trigger

v1.1.0 (2020-03-17)

  • Update

v1.0.9 (2020-03-13)

  • You can config locale as string or object now

v1.0.6 (2019-10-16)

  • Show error messages for .input-group and .form-group.has-feedback

v1.0.5 (2019-05-23)

  • Fix issue alert message when ajax is error or success

v1.0.4 (2019-05-03)

  • Fix issue related to jquery external

This awesome jQuery plugin is developed by ducdhm. For more Advanced Usages, please check the demo page or visit the official website.