jQuery Plugin For Form Validation & AJAX Submission - ssd-form

ssd-form is a lightweight, configurable jQuery plugin which adds form field validation and ajax submission functionalities to your existing html form.

Install the ssd-form:

# Yarn
yarn add ssd-form

# NPM
$ npm install ssd-form

How to use it:

1. Download and insert the ssd-form jQuery plugin's files into your webpage which has jQuery library loaded.

<link href="ssd-form.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.ssd-form.js"></script>

2. Apply custom validation rules & error messages to the form fields using HTML5 data attributes as these:

<form
      method="post"
      action="./submit.php"
      data-ajax-form
      data-success-behaviour="fadeOutShowMessage"
      novalidate
>

  <label for="title">
      <span data-validation="title">
          <span data-case="required">Please select your title</span>
          <span data-case="value_is">Selected value must be Mr</span>
      </span>
  </label>

  <select
      name="title"
      id="title"
      data-validate="required|value_is:1"
      >
      <option value="">Select title</option>
      <option value="1">Mr</option>
      <option value="2">Mrs</option>
      <option value="3">Miss</option>
      <option value="4">Ms</option>
  </select>

  <label for="first_name">
      <span data-validation="first_name">
          <span data-case="required">Please provide your first name</span>
          <span data-case="min">Length must be at least 3 characters</span>
          <span data-case="response">Validation triggered by ajax response</span>
      </span>
  </label>

  <input
          type="text"
          name="first_name"
          id="first_name"
          data-validate="required|min:3"
          placeholder="Your first name *"
  >

  <label for="last_name">
      <span data-validation="last_name">
          <span data-case="required">Please provide your last name</span>
          <span data-case="min">Length must be at least 3 characters</span>
      </span>
  </label>

  <input
          type="text"
          name="last_name"
          id="last_name"
          data-validate="required|min:3"
          placeholder="Your last name *"
  >

  <label for="email">
      <span data-validation="email">
          <span data-case="required">Please provide your email address</span>
          <span data-case="email">Invalid email address</span>
      </span>
  </label>

  <input
          type="email"
          name="email"
          id="email"
          data-validate="required|email"
          placeholder="Your email address *"
  >

  <label for="password">
      <span data-validation="password">
          <span data-case="required">Please choose your password</span>
          <span data-case="password">Length must be at least 6 characters, one capital letter and one number</span>
          <span data-case="confirmed">Passwords do not match</span>
      </span>
  </label>

  <input
          type="password"
          name="password"
          id="password"
          data-validate="required|password|confirmed"
          placeholder="Password"
  >

  <label for="password_confirmation">
      <span data-validation="password_confirmation">
          <span data-case="required">Please confirm your password</span>
          <span data-case="min">Length must be at least 5 characters</span>
      </span>
  </label>

  <input
          type="password"
          name="password_confirmation"
          id="password_confirmation"
          data-validate="required|password"
          placeholder="Password"
  >

  <label>
      <span data-validation="terms">
          <span data-case="checked">You must agree to our newsletter and conditions</span>
      </span>
  </label>

  <label for="terms">
      <input
              type="checkbox"
              name="terms"
              id="terms"
              data-validate="checked"
      > I agree to the terms and conditions
  </label>

  <input
          type="submit"
          class="button"
          value="SEND ENQUIRY"
          data-submit-trigger
  >

  <button
          type="button"
          class="button hide"
          disabled
          data-submit-pending
  >
      <i class="fa fa-spinner fa-spin"></i> PROCESSING
  </button>

</form>

3. Initialize the plugin on the form and done.

$('form[data-ajax-form]').ssdForm();

4. Initialize the plugin on the form and done.

$('form[data-ajax-form]').ssdForm({

  // HTML data attributes
  dataFormWrapper: 'data-form-wrapper',
  dataConfirmation: 'data-confirmation',
  dataValidationSegment: 'data-validation',
  dataValidationCase: 'data-case',
  dataSubmitTrigger: 'data-submit-trigger',
  dataSubmitPending: 'data-submit-pending',

  // hide/show classes
  classHide: 'hide',
  classShow: 'show',

  // you can add more behaviours here
  extendBehaviours: {},

  // you can add more validation rules here
  extendValidationRules: {},

  // custom behaviour on successful ajax response
  postAjaxSuccess: function(form, form_model, data) {
      form.successBehaviour(form_model, data);
  },

  // custom behaviour on failed ajax response
  postAjaxFailure: function(form, form_model, jqXHR, textStatus, errorThrown) {
      form.endRequestDisplayErrors(form_model, jqXHR.responseJSON);
  },

  // elements to ignore
  ignoreElements: '.button, [disabled]',

  // specify which attributes should be used
  serializeAttribute: null,

  // default behaviour
  actionMethod: function(form, form_model, success, error) {

      $.ajax({
          method: form_model.method(),
          url: form_model.action(),
          data: form_model.data(),
          dataType: 'json',
          cache: false,
          success: success,
          error: error
      });

  }
});

Change log:

2017-12-28

• v1.5.5: Fix for ckeditor value

2017-12-27

• v1.5.4: Option to ignore inputs without valid serializeAttribute

2017-12-26

• v1.5.2: Added checkboxes array to the exercise file. Needs implementation

2017-12-25

• v1.5.1: Removed clickSubmit method

2017-12-23

• v1.5: Added CKEDITOR handling

2017-07-18

• Updated regex validation rule

2017-05-13

• Added regex validation rule

---

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