Simple Form Validation Plugin with HTML5 and jQuery

File Size: 15.1KB
Views Total: 1954
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple Form Validation Plugin with HTML5 and jQuery

A simple and easy to use jQuery Form Validation plugin for validating data in HTML forms using HTML5 data- attribute before submitting.

Basic Usage:

1.  Include the latest jQuery library in the head section of your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

2. Include simple.validation.js and placeholder.js after jQuery library

<script src="placeholder.js" /></script>
<script src="jquery.simple.validation.js" /></script>

3. Html Markup

<form class="form_validation" action="" method="POST">
<input name="id" type="text" />
<input name="name" type="text" data-rules="First Name-required" />
<input name="email" type="text" data-rules="Email Address-required#Email Address-valid_email" />
<input name="url" type="text" data-rules="URL-valid_url" />
<input name="ip" type="text" data-rules="IP-valid_ip" />
<input name="password" id="txt_pass" type="password" data-rules="Password-min_length+8#Password-max_length+16" />
<input name="password2" type="password" data-rules="Confirm Password-matches+txt_pass+password" />
<input name="code" type="text" data-rules="Code-exact_length+5" />
<input name="range" type="text" data-rules="Range Value-numeric#Range Value-min+1#Range Value-max+5" />
<input name="alphabet" type="text" data-rules="Alphabet-alpha" />
<input name="alphabet_numeric" type="text" data-rules="Alphabet Numeric-alpha_numeric" />
<input name="numeric" type="text" data-rules="Numeric-numeric" />
<input name="is_numeric" type="text" data-rules="Is Numeric-is_numeric" />
<input name="integer" type="text" data-rules="Integer-integer" />
<input name="phone" type="text" data-rules="Phone Number-valid_phone" />
<input name="date" type="text" data-rules="Date-valid_date" />
</form>

4. Call the plugin

<script>
    $(function() {
        $('input, textarea').placeholder();
    });
    $(document).ready(function () {
        $('.form_validation').validate({
        short_error_message: true
});
</script>

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