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="//code.jquery.com/jquery-1.11.3.min.js"></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"
       data-vldtr-alpha="Custom message"
       >

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

<input type="text" placeholder="Username" 
       data-vldtr="alphanumeric,characters4"
       >

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

<input type="text" placeholder="Username" 
       data-vldtr="alphanumeric,characters4"
       data-vldtr-alert="false"
       >

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

$('form').valideater();

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.