Validate HTML Forms On The Client/Server Side - jQuery bValidator

bValidator is a powerful, customizable, themeable validation engine to validate form fields (or any form fields) on the client or server side.

More features:

• Supports HTML5 form validation attributes.
• 13 built-in themes to fit your web design.
• Custom validation messages.
• 20+ built-in validation rules.
• Custom validation functions.
• Supports dynamic form fields.

Basic usage:

1. Download and load the jquery.bvalidator.min.js script after loading the latest jQuery library.

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

2. Load a theme of your choice in the document. All possible themes:

1. gray
2. bs3popover
3. bs3tooltip
4. insert
5. group
6. gray2
7. gray3
8. gray4
9. orange
10. postit
11. red
12. bslikerc
13. bslikert

<link rel="stylesheet" href="/path/to/themes/bslikerc/bslikerc.css" />
<script src="/path/to/themes/bslikerc/bslikerc.js"></script>

3. Define the validation rules in the data-bvalidator attribute. All possible validation rules:

1. alpha
2. alphanum
3. digit
4. number
5. email
6. url
7. date[dateFormat]
8. required    
9. between[minimum value, maximum value] 
10. max[maximum value]
11. min[minimum value]
12. rangelen[minimum length, max length]   
13. maxlen[maximum length]  
14. minlen[minimum length]  
15. extension[jpg:png:txt] 
16. ip4
17. ip6
18. valempty
19. ajax    
20. differ[ElementId]  
21. equal[ElementId]   
22. pattern[pattern,modifier]

<form>
  Email: <input type="text" data-bvalidator="required,email" />
  Url: <input type="text" data-bvalidator="required,url" />
</form>

4. Initialize the plugin by adding the data-bvalidator-validate attribute to the form element.

<form data-bvalidator-validate>
  Email: <input type="text" data-bvalidator="required,email" />
  Url: <input type="text" data-bvalidator="required,url" />
</form>

5. Or by calling the function on the form element.

$('form').bValidator();

6. All default options to customize the form engine.

$('form').bValidator({
  singleError           : false,
  scrollToError         : true,
  scrollToErrorOffset   : -10,     // px
  lang                  : 'en',
  validateOn            : '',      // 'change', 'blur', 'keyup' ...
  errorValidateOn       : 'keyup', // 'change', 'blur', 'keyup' ...
  delayValidation       : 300,     // ms
  validateOnSubmit      : true,
  stopSubmitPropagation : true,
  validateTillInvalid   : false,
  skipValidation        : ':hidden, :disabled',
  html5ValidationOff    : true,
  enableHtml5Attr       : true,
  useTheme              : '',
  forceValidationResult : null,
  noMsgIfExistsForInstance : [],

  errorMessageAttr     : '-msg',      // attribute which holds error message text (data-bvalidator-msg)
  validateActionsAttr  : '',          // attribute for validation actions for the field (data-bvalidator)
  validationResultAttr : '-return',   // attribute for making field always valid (data-bvalidator-return)
  modifyActionsAttr    : '-modifier', // attribute for modifiers for the field (data-bvalidator-modifier)
  setThemeAttr         : '-theme',    // Attribute for setting the theme name. Can be set on <form> or <input> (data-bvalidator-theme)
  dataOptionNamespace  : 'Option',    // $.data namespace (data-bvalidator-option-)
  html5selector        : 'input[type=email],input[type=url],input[type=number],[required],input[min],input[max],input[maxlength],input[minlength],input[pattern]', // selector for HTML5 inputs, used only if enableHtml5Attr=true
  paramsDelimiter      : ':',
  actionsDelimiter     : ',',

  autoModifiers : {
    digit  : ['trim'],
    number : ['trim'],
    email  : ['trim'],
    url    : ['trim'],
    date   : ['trim'],
    ip4    : ['trim'],
    ip6    : ['trim']
  },

  ajaxValid       : 'ok',
  ajaxResponseMsg : false,
  ajaxOptions : {
    cache  : false,
    method : 'POST'
  },
  ajaxParams : null,
  ajaxUrl    : '',
  ajaxCache  : true,

  themes : {}, // theme options

  // default messages
  messages : {
    en : {
      'default' : 'Please correct this value.',
      minlen    : 'The length must be at least {0} characters.',
      maxlen    : 'The length must be at max {0} characters.',
      rangelen  : 'The length must be between {0} and {1}.',
      min       : 'Please enter a number greater than or equal to {0}.',
      max       : 'Please enter a number less than or equal to {0}.',
      between   : 'Please enter a number between {0} and {1}.',
      required  : 'This field is required.',
      alpha     : 'Please enter alphabetic characters only.',
      alphanum  : 'Please enter alphanumeric characters only.',
      digit     : 'Please enter only digits.',
      number    : 'Please enter a valid number.',
      email     : 'Please enter a valid email address.',
      url       : 'Please enter a valid URL.',
      ip4       : 'Please enter a valid IPv4 address.',
      ip6       : 'Please enter a valid IPv6 address.',
      date      : 'Please enter a valid date in format {0}',
      equal     : 'Please enter the same value again.',
      differ    : 'Please enter a different value.'
    }
  }
});

7. API methods.

// validates an input or HTML element
// returns true or false
$('#myform').data('bValidator').validate(input);

// checks if elements are valid
$('#myform').data('bValidator').isValid(input);

// returns an object of options
$('#myform').data('bValidator').getOptions();

// shows messages
$('#myform').data('bValidator').showMsg(input, message);
jQuery object containing inputs

// removes messages
$('#myform').data('bValidator').removeMsg(input);

// returns an object of inputs or html elements
$('#myform').data('bValidator').getInputs();

// returns an object of form elements
$('#myform').data('bValidator').getForm();

// resets the form
$('#myform').data('bValidator').reset(input);

// destroys the bValidator instance
$('#myform').data('bValidator').destroy();

// returns an object of built-in validation rules  
$('#myform').data('bValidator').getValidators();

// returns an object of built-in modifiers 
$('#myform').data('bValidator').getModifiers();

// sets the position in pixels for scrolling after validation.
$('#myform').data('bValidator').setScrollTo(position);

// binds the validation engine to new inputs & html elements
$('#myform').data('bValidator').bindValidateOn(input) 

8. Event handlers.

$('#myForm').on('beforeFormValidation.bvalidator', function () {
  // before form validation
})

$('#myForm').on('afterFormValidation.bvalidator', function () {
  // after form validation
})

$('#myForm').on('beforeFieldValidation.bvalidator.bvalidator', function () {
  // before field validation
})

$('#myForm').on('afterFieldValidation.bvalidator.bvalidator', function () {
  // after field validation
})

$('#myForm').on('afterAjax.bvalidator', function () {
  // after server-side validation
})

---

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