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

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.