Light-weight, Mobile-ready and Customizable Form Validation Plugin for jQuery – Checkify
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.
<!--CSS--> <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" /> <!-- Js --> <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.
<form id="my-form"> <div class="form-group"> <div class="row"> <div class="col-sm-3"> <input type="text" class="form-control" data-checkify="minlen=2,required" /> </div> <div class="col-sm-3"> <input type="text" class="form-control" data-checkify="maxlen=4,number" /> </div> <div class="col-sm-3"> <input type="text" class="form-control" data-checkify="number" /> </div> <div class="col-sm-3"> <textarea class="form-control" data-checkify="maxlen=5"></textarea> </div> </div> </div> <button class="my-button">click me</button> </form> |
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, inactiveForRequired: true, 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' }, button: null, realTime: false, onValid: null, onError: null |
See live demo and download source code.
DEMO | DOWNLOAD
This awesome plugin is developed by digitalify. Visit their official github repository for more information and follow for future updates.