Fast User-friendly Form Validation Plugin – Validator.js

Preview:

Description:

A fast, cross-browser, user-friendly, highly customizable form validator that works with the native HTML5 input types: text, email, url, date, etc.

More features:

• Custom trigger event: blur, click, change, etc.
• Allows you to validate form fields using custom regex.
• Pretty and interactive feedbacks for invalid form fields.
• Supports multi fields. Suitable for credit card form validation.
• With no dependencies.

How to use it:

1. Load the validator.js script into the document.

<script src="validator.js"></script>

2. Load the multifield.js if you’d like to validate a form field containing multiple inputs.

<script src="multifield.js"></script>

3. Disable the native HTML5 data validation on your form.

<form action="" method="post" novalidate>
  ...
</form>

4. Apply validators to the form fields using the following attributes:

• required: is required?
• pattern: ‘numeric’, ‘alphanumeric’, ‘url’, ‘phone’, ’email’, or custom regex.
• data-validate-words: Specify the minimum amount of words for this field.
• data-validate-length: Specify the length allowed for the field (after trim). For example: [3,10] means that the field can only have 3 or 10 characters.
• data-validate-length-range: Specify the minimum and/or maximum number of chars in the field (after trim).
• data-validate-linked: Specify the field which the current field’s value (the attribute is set on) should be compared to.
• data-validate-minmax: Specify the minimum and/or maximum value.

<span>Name</span>
<input data-validate-length-range="6" data-validate-words="2" name="name" required="required" />
<span>Occupation</span>
<input data-validate-length-range="5,15" name="occupation" type="text" />
<span>Email</span>
<input name="email" required="required" type="email" class="email" />
<span>Confirm Email address</span>
<input data-validate-linked="email" type="email" class='email' name="confirm_email" required="required">
<span>Number</span>
<input data-validate-minmax="10,100" type="number" name="number" required='required'>

5. Initialize the form validator on the form element and done.

var validator = new FormValidator({
    // options here
});

6. Validate the form on submit (OPTIONAL).

document.forms.onsubmit = function(e){
  var submit = true,
      validatorResult = validator.checkAll(this);
  console.log(validatorResult);
  return !!validatorResult.valid;
};

7. Default settings to config the form validator.

var validator = new FormValidator({
    // shows alert tooltip
    alerts : true,
    // custom trigger events
    // e.g. ['blur', 'input', 'change']
    events : false,
    // predefined validators
    regex : {
      url          : /^(https?:\/\/)?([\w\d\-_]+\.+[A-Za-z]{2,})+\/?/,
      phone        : /^\+?([0-9]|[-|' '])+$/i,
      numeric      : /^[0-9]+$/i,
      alphanumeric : /^[a-zA-Z0-9]+$/i,
      email        : {
        illegalChars : /[\(\)\<\>\,\;\:\\\/\"\[\]]/,
        filter       : /^.+@.+\..{2,6}$/ // exmaple email "[email protected]"
      }
    },
    // default CSS classes
    classes : {
      item  : 'field',
      alert : 'alert',
      bad   : 'bad'
    }
});

8. Default error messages.

texts : {
  invalid         : 'inupt is not as expected',
  short           : 'input is too short',
  long            : 'input is too long',
  checked         : 'must be checked',
  empty           : 'please put something here',
  select          : 'Please select an option',
  number_min      : 'too low',
  number_max      : 'too high',
  url             : 'invalid URL',
  number          : 'not a number',
  email           : 'email address is invalid',
  email_repeat    : 'emails do not match',
  date            : 'invalid date',
  time            : 'invalid time',
  password_repeat : 'passwords do not match',
  no_match        : 'no match',
  complete        : 'input is not complete'
},