Light-weight, Mobile-ready and Customizable Form Validation Plugin for jQuery – Checkify

by

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.

jquery-form-validation



Libraries

Include bootstrap and jQuery library after that load plugins js+css library.

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.

DEMO | DOWNLOAD

This awesome plugin is developed by digitalify. Visit their official github repository for more information and follow for future updates.


Published by Rohit