Press "Enter" to skip to content

[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 a 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

JavaScript Library Stores Form Data in Local Storage | form-storage

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 Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *