Realtime Form Validation Engine In jQuery - Checkifyr

Realtime Form Validation Engine In jQuery - Checkifyr
File Size: 21.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Checkify is a jQuery based form validator that provides realtime, client-side, mobile-friendly validation functionalities on form fields.

The plugin highligihts the invalid form fields and displays custom error messages in a tooltip popup. Word perfectly with Bootstrap framework.

Available validators:

  • Required
  • Max/min length.
  • Is number.
  • Is email.
  • REGEX.

How to use it:

1. Import the jQuery Checkify plugin's files into the document.

<link rel="stylesheet" href="/dist/checkify.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="/dist/checkify.js"></script>

2. Apply validation rules to your form fields using the data-checkify attribute:

  • required
  • minlen
  • maxlen
  • number
  • email
  • regex
<div class="myForm">
  <input type="text" class="form-control" data-checkify="minlen=2,required" />
</div>
<div class="myForm">
  <input type="text" class="form-control" data-checkify="maxlen=4,number" />
</div>
<div class="myForm">
  <input type="text" class="form-control" data-checkify="number" />
</div>
<div class="myForm">
  <textarea class="form-control" data-checkify="maxlen=5"></textarea>
</div>
...

3. Activate the form validator and done.

$('form').checkify({

  // specify the trigger button
  // useful for multiple forms on the page
  button: null,

  // submit trigger
  submitTrigger: null,

  // realtime validation
  // default: false
  realTime: true
  
});

4. Customize the error messages when invalid.

$('form').checkify({

  message: {

    // disable the form fields
    inactive: false,
    inactiveForRequired: true,

    // horizontal & vertical gaps
    hGap: null,
    vGap: null,

    // or 'right'
    position: 'left',

    // error messages
    required: 'This field is required.',
    email: 'Invalid data.',
    regex: 'Invalid data.',
    number: 'Invalid data, only numbers allowed.',
    maxlen: 'Maximum {count} characters allowed.',
    minlen: 'Minimum {count} characters allowed.'

  }

});

5. Available callbacks which will be fired when the form is valid or invalid

$('form').checkify({

  onError: function () {
    console.log('error');
  },
  onValid: function (e, x) {
    console.log(e, x);
    e.preventDefault();

    console.log('valid');
  }

});

This awesome jQuery plugin is developed by digitalify. For more Advanced Usages, please check the demo page or visit the official website.