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

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 lettersalphanumeric
: Letters and numbers requiredcharacters4
: At least 4 characters pleasedob
: Please give a valid date of birthEmail
: Invalid emailmatches
: These values do not matchnumeric
: Value must be numericpostcode
: Invalid postcoderadio
: Please choose an optionrequired
: 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.