Micro HTML5 Form Validator With jQuery - Snapkit Validation

Snapkit Validation is a lightweight (~4kb) and easy-to-use jQuery plugin which applies most commonly used validation rules to your html form fields. Supported validation rules: required, match, number, email, URL, and min/max length. Compatible with Bootstrap framework.

How to use it:

1. Load the Snapkit Validation plugin's JS and CSS files in your html page.

<link href="snapkit-validation.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="snapkit-validation.min.js"></script>

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

• data-validate="required": required field
• data-validate="email": validate email address
• data-validate="match | #email": check if match the #email
• data-validate="number": the field must be a number
• data-validate="website": validate URL
• data-validate="minLenght | 20": at least 20 chars
• data-validate="maxLenght | 40": no more than 40 chars

<form class="form">
  <div class="form-group form__group">
    <label for="name" class="form__group__label">Username*:</label>
    <input type="text" class="form-control" id="name">
    <span class="form__group__info" data-validate="required">This field is required</span>
  </div>
  <div class="form-group form__group">
    <label for="email" class="form__group__label">E-mail address*:</label>
    <input type="age" class="form-control" id="email">
    <span class="form__group__info" data-validate="required">This field is required</span>
    <span class="form__group__info" data-validate="email">E-mail not valid</span>
  </div>
  <div class="form-group form__group">
    <label for="emailConfirm" class="form__group__label">Confirm e-mail address*:</label>
    <input type="age" class="form-control" id="emailConfirm">
    <span class="form__group__info" data-validate="required">This field is required</span>
    <span class="form__group__info" data-validate="email">E-mail not valid</span>
    <span class="form__group__info" data-validate="match | #email">The e-mails doesn't match</span>
  </div>
  <div class="form-group form__group">
    <label for="age" class="form__group__label">Age*:</label>
    <input type="text" class="form-control" id="age">
    <span class="form__group__info" data-validate="required">This field is required</span>
    <span class="form__group__info" data-validate="number">This field must be a number</span>
  </div>
  <div class="form-group form__group">
    <label for="website" class="form__group__label">Website*:</label>
    <input type="text" class="form-control" id="website">
    <span class="form__group__info" data-validate="required">This field is required</span>
    <span class="form__group__info" data-validate="website">This field must be a valid website</span>
  </div>
  <div class="form-group form__group">
    <label for="comment" class="form__group__label">Comment*:</label>
    <textarea class="form-control" rows="5" id="comment"></textarea>
    <span class="form__group__info" data-validate="required">This field is required</span>
    <span class="form__group__info" data-validate="minLenght | 20">The comment must be at least 20 chars long</span>
    <span class="form__group__info" data-validate="maxLenght | 40">The comment must be no more than 40 chars long</span>
  </div>
  <div class="text-center">
    <input class="btn btn-default" name="submit" type="submit" value="Send message">
  </div>
</form>

Change log:

2016-11-18

• v1.0.2

---

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