An Easy-to-use jQuery Plugin for Form Validation JS

Form Validator plugin is a simple, flexible, Bootstrap-compatible jquery form validator to validate your HTML form fields against required fields, strings, email, password, regular expression, and much more.

jquery validate div instead of form, simple jquery form validation example, jquery form validation demo with source code, jquery validate form before submit, best form validation

How to make use of it:

1. Include the jQuery JavaScript library and the jQuery Form Validator plug-in.

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

2. It uses Bootstrap styles so you must load Bootsptrap’s CSS in the header 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>

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

4. Configure 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');
    },
  }

]);

5. Validate the form upon submission.

$('.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

simple flexible jquery form validator Plugin/Github