jQuery Plugin For Submitting A Form with Ajax - FormSubmit

Just another jQuery plugin which allows you to submit an Html form using Ajax method, with support for callback events, field validation, custom feedback and much more.

See also:

• Simple AJAX Form Submission Plugin with jQuery - Submitter

How to use it:

1. Add jQuery library and the jQuery formsubmit's script to your html page.

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

2. Add an Ajax loaded and a feedback container to your existing form as follow. The Ajax loader is styled to be hidden by default. It will automatically show when the form is busy.

<form id="demo" action="ajax.php" method="post">
  
  <!-- Form fields here -->
 
  <!-- feedback element -->
  <div class="formSubmit-feedback"></div>
  
  <button type="submit" class="button">Submit</button>
  
  <!-- Ajax loader -->
  <img src="loader.gif" class="loader" >
  
</form>

3. Initialize with formSubmit() method.

$('form').formSubmit({
  // options here
});

4. Full configurable options and callback functions.

before: function() {
  // executes code before the form gets serialized and submitted;
  // Returning false here will prevent the form from being submitted.
},

success: function(data) {
  // executes when the form is submitted and a `success`
  // status is returned
},

error: function(data) {
  // executes when the form is submitted and an `error`
  // status is returned
},

ajaxError: function(jqXHR, textStatus, errorThrown) {
  // executes when an XHR error occurs
},

showInvalid: function() {
  // a function that iterates through each erroneous field as
  // returned in the `invalid` property. Use $(this)
  // to reference each field.  Note that all erroneous fields
  // will always have the `formSubmit-invalid` class applied to
  // them by default.
  //
  // Example:

  $(this).addClass('your-custom-class');
},

hideInvalid: function() {
  // a function that iterates through each erroneous field
  // before submit to clear them. This should do the opposite
  // of showInvalid().  Note that the `formSubmit-invalid` class
  // will automatically be removed by the plugin.
  //
  // Example:

  $(this).removeClass('custom-invalid-class');
}

// CSS class for success feedback
feedbackSuccessClass: '',

// CSS class for error feedback
feedbackErrorClass: ''

---

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