HTML5 Validity Based Form Validation Plugin - jQuery validity.js
File Size: | 8.63 KB |
---|---|
Views Total: | 7556 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

validity.js is a small jQuery HTML5 form validation plugin used to validate the values of any form fields using the HTML validity property. You can apply custom styles to the form fields and customizie the error messages when the values are invalid.
How to use it:
1. Download and load the JavaScript file jquery.validity.js
after the latest jQuery library.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/js/jquery.validity.js"></script>
2. Initialize the plugin on the existing html form and done.
<form class="validity" method="post" action="/"> <!-- Form Fields Here --> <button type="submit">Submit</button> </form>
$(function() { $('.validity').validity() .on('submit', function(e) { var $this = $(this), $btn = $this.find('[type="submit"]'); $btn.button('loading'); if (!$this.valid()) { e.preventDefault(); $btn.button('reset'); } }); });
3. Apply custom styles to the form fields when the form values are valid/invalid.
.your-field.error { border-color: red; } .your-field.mismatch { border-color: orange; } .your-field.valid { border-color: green; }
4. Customize the error messages when the form fields are invalid.
<input id="name" name="name" class="your-field" type="text" required data-missing="This field is required" > <input id="phone" name="phone" class="your-field" pattern="\d{3}[\-]\d{3}[\-]\d{4}" type="tel" required data-mismatch="Please match the requested format: 999-999-9999" >
// or $('.validity').validity({ messages: { missing: 'Required Filed', mismatch: 'The value entered is invalid' } })
5. Determine the form field to include & exclude.
$('.validity').validity({ selector: ':input', ignore: ':hidden' })
Changelog:
2020-03-20
- JS update
2020-01-08
- JS update
This awesome jQuery plugin is developed by gustavoconci. For more Advanced Usages, please check the demo page or visit the official website.