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

by Posted on

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.

<!--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.


Published by admin