Minimal Inline Form Validation Plugin For jQuery - Valideater

File Size: 9.06 KB
Views Total: 2454
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Minimal Inline Form Validation Plugin For jQuery - Valideater

Valideater is a lightweight jQuery/HTML5 form validator that displays custom error / alert messages next to the invalid form elements when typing or clicking on the submit button.

Validation rules supported:

  • alpha: Value must be letters
  • alphanumeric: Letters and numbers required
  • characters4: At least 4 characters please
  • dob: Please give a valid date of birth
  • Email: Invalid email
  • matches: These values do not match
  • numeric: Value must be numeric
  • postcode: Invalid postcode
  • radio: Please choose an option
  • required: This information is required

Basic usages:

1. Download the jQuery Valideater plugin and include the jquery.valideater.js script on the web page.

<script src="//"></script>
<script src="js/jquery.valideater-0.2.2.js"></script>

2. Add the validation rules to the form fields using data-vldtr attribute as follow.

<input type="text" placeholder="First name" data-vldtr="alpha">

3. Customize the error message using data-vldtr-RuleName attribute.

<input type="text" placeholder="First name" 
       data-vldtr-alpha="Custom message"

4. The plugin allows you to apply multiple validation rules at a time.

<input type="text" placeholder="Username" 

5. Prevent a specific form field from displaying alert message.

<input type="text" placeholder="Username" 

6. Finally, you need to call the function on the form tag to active the validator.


7. All the default plugin options. You can also pass the following options via HTML5 data attributes as noticed above.

// predefined error messages
'alpha':    'Value must be letters.',
'alphanumeric': 'Letters and numbers required.',
'characters4':  'At least 4 characters please.',
'dob':      'Please give a valid date of birth.',
'email':    'Invalid email.',
'matches':    'These values do not match.',
'numeric':    'Value must be numeric.',
'postcode':   'Invalid postcode.',
'radio':    'Please choose an option.',
'required':   'This information is required.',

// live check
'livecheck':    true,

// max age for DOB validation
'maxage':     122,

// min age for DOB validation
'minage':     18,

// display alerts
'alerts':     true,

// CSS classes
'errorCssClass':  'js-vldtr-error',
'alertCssClass':  'js-vldtr-alert'

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