[AJAX] Validate and Publish Form Data to Server | jquery.niceform

NiceForm JQuery plugin for validating and publishing form data to the server. This plugin is powerful and customizable that can be used to validate a different type of form field and send form data to the server side via AJAX requests.

multipartform data post request, how to post multipartform data using javascript, formdata javascript, javascript post form data

How to make use of it:

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 & instances.

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

3. Add validation guidelines to form fields utilizing the next CSS helpers:

<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 attainable choices 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 capabilities.

$('#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 strategies.

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 also can customize the error message for each form field utilizing 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!" /> 

Create Your Own jQuery AJAX Form Submit With Validation, Ajax submission with form validation plugin, NiceForm Plugin/Github


See Demo And Download

Official Website(ducdhm): Click Here

This superior jQuery/javascript plugin is developed by ducdhm. For extra Advanced Usage, please go to the official website.

Share