Robust Modular HTML5 Form Validation Plugin - Form Validator

A robust, flexible, customizable and modular form validator that supports both native HTML5 form validation features and custom validation rules.

Modules supported:

• date.js: date & time validation
• file.js: file mime, extension, size and dimension validation
• html5.js: make this plugin serve as an html5 fallback
• jsconf.js: configure form validation using javascript
• location.js: Country, US state, longitude and latitude validation
• logic.js: depends-on and if-answered validation
• sanitize.js: add sanitation functions to inputs (uppercase, lowercase, capitalize, trim, trimLeft, trimRight, numberFormat, insertLeft, insertRight, strip, escape (replace <, >, &, ' and " with HTML entities))
• security.js: Great for registration forms (spamcheck, confirmation, strength, backend, credit card, cvv).
• toggleDisabled.j: takes care of disabling/enabling submit buttons in forms, depending on if the inputs of the form is valid or not.
• uk.js: adds validators typically used on websites in the UK (ukvatnumber, ukutr, uknin)
• brazil.js: adds validators typically used on websites in Brazil (cpf, cep, brphone)
• poland.js: adds validators typically used on websites in Poland (plpesel)
• poland.js: adds validators typically used on websites in Sweden (validate_swesec (Social security number), validate_swemobile, validate_validate_municipality, validate_county, validate_swephone)

Install the Form Validator:

# NPM
npm install jquery-form-validator

# Bower
bower install jquery-form-validator

Basic usage:

1. Include the main JavaScript file and modular files of your choice after JQuery library as this:

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

2. Add validation rules to your form fields using HTML5 data attributes:

<form action="#" method="POST">
  <label>
    Username:
    <input data-validation="length alphanumeric" data-validation-length="min4">
  </label>
  <label>
    Year (yyyy-mm-dd):
    <input data-validation="date" data-validation-format="yyyy-mm-dd">
  </label>
  <label>
    Website:
    <input data-validation="url">
  </label>
    <input type="submit">
</form>

3. Initialize the form validator:

$.validate();

4. Default plugin customization options.

$.validate({

  // Names of inputs not to be validated
  ignore: [], 

  // Class that will be put on elements which value is invalid
  errorElementClass: 'error', 

  // Class that will be put on elements that has been validated with success
  successElementClass: 'valid', 

  // Border color of elements which value is invalid
  // empty string to not change border color
  borderColorOnError: '#b94a48', 

  // class name of div containing error messages when validation fails
  errorMessageClass: 'form-error', 

  // name of the attribute holding the validation rules
  validationRuleAttribute: 'data-validation', 

  // define custom err msg inline with element
  validationErrorMsgAttribute: 'data-validation-error-msg', 

  // Can be either "top" or "inline"
  errorMessagePosition: 'inline', 

  // template
  errorMessageTemplate: {
    container: '<div class="{errorMessageClass} alert alert-danger">{messages}</div>',
    messages: '<strong>{errorTitle}</strong><ul>{fields}</ul>',
    field: '<li>{msg}</li>'
  },

  // scroll to top if the form wasn't validated
  scrollToTopOnError: true,

  // date format
  dateFormat: 'yyyy-mm-dd',

  // apply class="valid" even if the input wasn't validated
  addValidClassOnAll: false, 

  // custom decimal separator
  decimalSeparator: '.',

  // twitter-bootstrap default class name
  inputParentClassOnError: 'has-error', 

  // twitter-bootstrap default class name
  inputParentClassOnSuccess: 'has-success', 

  // whether or not hidden inputs should be validated
  validateHiddenInputs: false, 

  // callback functions
  inlineErrorMessageCallback: false,
  submitErrorMessageCallback: false
  
});

Changelog:

2017-08-27

• v2.3.79

2017-08-10

• v2.3.76

2017-07-20

• Add Arabic language

2017-07-15

• Async validators should be applied to original validator object added when calling .addAsyncValidator

2017-07-07

• make it possible to inline language files

2017-07-05

• v2.3.72

2017-07-04

• Support Turkish Language

2017-05-11

• Added support for age-range in birthday validator

2017-05-10

• v2.3.62

2017-05-04

• v2.3.61

2017-04-08

• [fix] use successElementClass instead of valid class

2017-03-17

• various fixes

2017-02-25

• Add better green check mark

---

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