Description
This plugin validate form
Initialization
Validate.run(selectors, options); // selectors - node|nodeList|string
Markup
One example of markup
<form action="" class="js-validate" method="POST">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Name" data-valid="required|minLen(2)">
</div>
<div class="form-group">
<label for="e-mail">Email</label>
<input type="text" id="e-mail" name="e-mail" placeholder="E-mail" data-valid="required|email"/>
</div>
<button>Send<button/>
</form>
Options
All options with defaults
{
liveChange: true, // realtime validating fields
onError(errors) { //do something with errors object }
onSuccess(event) { event.preventDefault(); //do something }
onChange(field) { // field object }
onReset(event) { // reset form and removing errors}
validators: {
regex: {
isHuman: {
pattern: /^human$/i, // check `word` in the field
error: 'You must type the word human' // error message
}
}
}
}
Simple localization
For example russian messages
Validate.i18n = {
required: 'Данное поле обязательно для заполнения',
minLen: 'Минимально допустимое количество символов равно %s%',
maxLen: 'Максимально допустимое количество символов равно %s%',
email: 'Поле e-mail имеет неверный формат',
number: 'Введенные данные должны быть числом',
equalTo: 'Введенные данные не совпадают'
}
Validate.run('.js-validate', options);
Custom messages using the data-attributes data-valid-msg-{method_name}
<input type="text" data-valid="required|email" data-valid-msg-email="Invalid email format"/>