Fast And Easy To Use Form Validation Plugin - jQuery Tiny Validate

Form Validation is an important part of the user experience. Something is definitely off (or not quite right) if you've designed a form and it looks good, but does not validate.

Usually, an error message for the user can help them fix the problem quickly and make sure their information is structured as you require. It also ensures that users have filled in all required information before submitting a form.

The jQuery Tiny Validate plugin contains everything you need to know about form validation with lots of examples to go with each method. Let's get started.

Features:

• Lightweight and fast.
• Realtime field validation.
• AJAX form supported.
• Inline & Summary error messages.
• 10+ built-in validation rules.
• Easy to add your own rules via Regex.

How to use it:

1. Insert the main JavaScript and rules into the document.

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- Core JavaScript -->
<script src="src/jquery.tinyvalidate.js"></script>

<!-- Rules -->
<script src="src/jquery.tinyvalidate.rules.js"></script>

2. Add validation rules to form fields by using CSS classes as follows:

• required
• email
• url
• zip
• date
• phone
• ssn
• currency
• choose-one
• max
• equals

<form class="example" action="" method="post">
  <fieldset>
  <legend>Project Information</legend>
    <div class="text">
      <label for="project-name">Project Name: *</label>
      <input type="text" pattern="\w+" required id="project-name" />
    </div>
    <div class="text">
      <label for="project-bud">Budget:</label>
      <input class="currency" size="8" type="text" id="project-bud" />
      <span class="unit">US Dollars</span>
    </div>
    <div class="text">
      <label for="project-zip">Zip Code: *</label>
      <input class="required zip" type="text" id="project-zip" />
    </div>
    <div class="dropdown">
      <label for="project-type">Project Type:</label>
      <select id="project-type" name="project-type">
        <option value="good">good</option>
        <option value="bad">bad</option>
        <option value="ugly">ugly</option>
      </select>
    </div>
    <fieldset class="radio choose-one">
      <legend>Size of Project</legend>
      <div>
        <input type="radio" name="size" id="twenty" value="1" />
        <label for="twenty">20 People</label>
      </div>
      <div>
        <input type="radio" name="size" id="more" value="2" />
        <label for="more">More than 20 People</label>
      </div>
    </fieldset>
    <div class="textarea">
      <label for="project-desc">Project Description</label>
      <textarea rows="4" cols="50" id="project-desc"></textarea>
    </div>
  </fieldset>
  <fieldset class="max max-2">
    <legend>I am a... </legend>
    <div>(choose no more than two)</div>
    <div class="checkbox">
      <input type="checkbox" name="i-am" id="driver" value="1" />
      <label for="driver">Licensed Driver</label>
    </div>
    <div class="checkbox">
      <input type="checkbox" name="i-am" id="timebomb" value="2" />
      <label for="timebomb">Walking Timebomb</label>
    </div>
    <div class="checkbox">
      <input type="checkbox" name="i-am" id="fiscal" value="3" />
      <label for="fiscal">Fiscal Nightmare</label>
    </div>
  </fieldset>
  <fieldset class="actions">
      <input name="submitfoo" class="submit" type="submit" value="Submit Form" />
      <a class="cancel" href="#">Cancel</a>
  </fieldset>
</form>

3. Call the Tiny Validate on the form element and the plugin will do the rest.

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

4. Create your own rules as you've seen in the jquery.tinyvalidate.rules.js.

$.tinyvalidate.rules.phone = {
  ruleClass: 'phone',
  rule: function(r) {
    return (/\(?\d{3}\)?[\. -]?\d{3}[\. -]?\d{4}/).test(r) || r === '';
  },
  text: 'Invalid Format ',
  check: 'value'
};

5. Available options to customize the form validator.

$('form.example').tinyvalidate({

  // determine whether to ignore disabled fields
  ignoreDisabled: true,

  // determine whether to ignore hidden fields
  ignoreHidden: true,

  // determine whether to use Regex defined in the pattern attribute
  usePattern: false,

  // other events to trigger the form validation
  otherEvents: 'blur',

  // called when one of the events is triggered.
  onEvents: $.noop,

  // called if an error occurs when submitting
  submitError: function(errorCount) {},

  // override the naive submit event
  // function() { /* do something */ }
  submitOverride: null

});

6. Customize the inline error messages.

$.fn.tinyvalidate.defaults.inline = {
  insertType: 'after',
  insertTo: null,
  errorElement: '<div class="error-message"></div>',
  errorAnimate: {
    effect: 'fadeIn',
    speed: 400
  },
  containerTag: 'div',
  containerErrorClass: 'error'
};

7. Customize the error message summary.

$.fn.tinyvalidate.defaults.summary = {
  insertTo: 'form',
  insertType: 'append',
  wrapper: '<div class="error-summary"></div>',
  preMessage: 'Please review the {num} highlighted {field|fields} and try again.<ul>',
  postMessage: '</ul>',
  messageAnimate: {
    effect: 'fadeIn',
    speed: 400
  },
  // set to null if you don't want to include details in the summary message:
  lineItems: {
    wrapper: '<li></li>',
    errorElement: '<span class="error-message"></span>',
    // create link in summary details to inputs with errors
    linkify: true
  }
};

8. Clear all errors.

$("form.example").tinyvalidate('removeErrors');

9. Destroy the plugin.

$("form.example").tinyvalidate('destroy');

---

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