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

4. Attach the plugin to the HTML form.

$('#myForm').niceform({
  // options here
});

5. All possible options to config the plugin.

$('#myForm').niceform({

  // 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('.has-error').removeClass('has-error');
    form.find('.is-invalid').removeClass('is-invalid').attr('data-error-message', '');
    form.niceform('hideElement', form.find('.nf-error-message'));
    form.niceform('hideMessage');
  },

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

});

6. Callback functions.

$('#myForm').niceform({

  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
instance.enableForm();

// disables the form
instance.disableForm();

// clears the value from a specific form field
instance.clearValue(controlSelector);

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

// Shortcuts
instance.showSuccessMessage(message);
instance.showErrorMessage(message);

// hides the error message
instance.hideMessage();

// gets options
instance.getOptions();

// shows/hides element
instance.showElement($element);
instance.hideElement($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!" /> 

Changelog:

v1.1.9 (2020-09-22)

• Use new API for checking URL

v1.1.8 (2020-09-11)

• Support select2

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.