Are you looking for jQuery form validation plugin? If yes then here I am going to share simple Light-weight, Mobile-ready and Customizable Form Validation Plugin for jQuery. Checkify is a jQuery based form validation plugin that provides realtime, client-side, mobile-friendly validation feature for input fields. The plugin highligihts the invalid form fields and displays custom error messages as popup tooltip.
Libraries
Include bootstrap and jQuery library after that load plugins js+css library.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="checkify.css" /> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">script> <script src="checkify.min.js">script> |
HTML
Create simple HTML form which need to validate before submit.
JS
Call the plugin and apply realtime client side form validation.
$('#my-form').checkify({ message: { hGap: 15 }, button: '.my-button', realTime: true, onError: function () { console.log('error'); }, onValid: function (e, x) { console.log(e, x); e.preventDefault(); console.log('valid'); } }); |
Available options:
List of available validation options.
message: { inactive: false, // if true. error message won't be shown for required cases inactiveForRequired: true, // can be right or left position: 'left', required: 'This field is required.', email: 'Invalid data.', regex: 'Invalid data.', number: 'You can enter only numbers in this field.', maxlen: 'Maximum {count} characters allowed!', minlen: 'Minimum {count} characters allowed!', maxChecked: 'Maximum {count} options allowed.', minChecked: 'Please select minimum {count} options.', maxSelected: 'Maximum {count} selection allowed.', minSelected: 'Minimum {count} selection allowed.', notEqual: 'Fields do not match.', different: 'Fields cannot be the same as each other' }, // css selector, useful when you have multiple submit button in same page and you need to bind checkify on one of them button: null, realTime: false, // callback, can be function onValid: null, // callback, can be function onError: null |
See live demo and download source code.
This awesome plugin is developed by digitalify. Visit their official github repository for more information and follow for future updates.