Simple Flexible jQuery Powered Form Validator

A simple, flexible and Bootstrap compatible jQuery form validator for validating your HTML form fields against required field, string, email, password, regular expression, and many more.

Features:

• Display validation error messages on the top of your form.
• Ability to use custom regex rules.
• Compare two password fields for same value.
• error and success callbakcs.

Basic usage:

1. Include jQuery JavaScript library and the jQuery Form Validator plugin at the bottom of your form page.

<script src="jquery.min.js"></script>
<script src="src/form-validator.js"></script>

2. Create a standard form like this. This example uses Bootstrap styles so you should load the Bootsptrap's CSS in the head section of your web page.

<form class="register-form">
  <div class="form-group">
    <label for="your-name">Name</label>
    <input type="text" name="name" class="form-control" id="your-name" placeholder="Enter your name">
  </div>
  <div class="form-group">
    <label for="email">Email address</label>
    <input type="text" name="email" class="form-control" id="email" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="password">Password (<small>Contains characters and numbers</small>)</label>
    <input type="password" name="password" class="form-control" id="password" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="password2">Password Again</label>
    <input type="password" name="password2" class="form-control" id="password2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

3. Create an empty container to place the validation messages.

<div class="alert alert-danger register-alert hidden" role="alert"></div>

4. Register a new form validator.

window.validator = new FormValidator('.register-form');

5. Config the form validator.

validator.config([
  //first name
  {
    // jQuery selector
    selector: '[name="name"]',

    // give a name to this entity
    name: 'Name',

    // custom regex rules
    match: new RegExp('[a-zA-Z]','g'),

    // required field
    required: true,

    // when invalid
    error: function() {
      this.$element.closest('.form-group').addClass('has-error');
    },

    // when valid
    success: function() {
      this.$element.closest('.form-group').removeClass('has-error');
    },
  },

  //email
  {
    selector: '[name="email"]',
    name: 'Email',
    required: true,
    match: new RegExp("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$","g"),
    error: function() {
      this.$element.closest('.form-group').addClass('has-error');
    },
    success: function() {
      this.$element.closest('.form-group').removeClass('has-error');
    },
  },

  //password
  {
    selector: '[name="password"]',
    name: 'Password',
    required: true,
    match: new RegExp("^(?=.*[a-z])(?=.*[0-9]).*$", "g"),
    error: function() {
      this.$element.closest('.form-group').addClass('has-error');
    },
    success: function() {
      this.$element.closest('.form-group').removeClass('has-error');
    },
  },
  
  //password2
  {
    selector: '[name="password2"]',
    name: 'Password again',
    required: true,
    sameAs: '[name="password"]',
    error: function() {
      this.$element.closest('.form-group').addClass('has-error');
    },
    success: function() {
      this.$element.closest('.form-group').removeClass('has-error');
    },
  }

]);

6. Validate the form on submit.

$('.register-form').submit(function(){
  if (validator.submit()) // all legal
    return true;

  //something illegal, output error messages
  $('.register-alert').empty();
  validator.errorMsgs.forEach(function(obj){

    // customize error message
    if (obj.name == 'Password again' && obj.attribute == 'sameAs') {
      obj.msg = obj.msg + ' as password';
    }

    var $err = $('<p class="text-danger">'+obj.msg+'</p>')
    $('.register-alert').append($err);
  })

  $('.register-alert').removeClass('hidden');
  return false;
}) //form submit

---

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