Простой валидатор. Использует атрибуты html5 валидации. Но поддержка html5 браузером не требуется. По идее должно работать в IE9+
В современных браузерах валидация будет работать и без js (кроме проверки пароля).
<!DOCTYPE html>
<style>
input{
border: 1px solid #777;
}
input:focus{
outline: none;
box-shadow: 0 0 5px rgb(179, 179, 179);
}
.state-error{
border-color: red;
}
.state-success{
border-color: green;
}
</style>
<form action="">
<p><input placeholder="Логин" type="text" name="name" required="" pattern="[a-zA-Z]{2,64}" /></p>
<p><input placeholder="E-mail" type="email" name="email" required="" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+" /></p>
<p><input placeholder="Пароль" type="password" name="password" required="" pattern=".{2,64}" /></p>
<p><input placeholder="Пароль еще раз" type="password" name="passwordConfirm" required="" /></p>
<p><button type="submit">Отправить</button></p>
</form>
<script>
function FormValidator(form, rules) {
form.noValidate = true;
form.addEventListener('input', this);
form.addEventListener('submit', this);
this.form = form;
this.rules = rules;
}
FormValidator.prototype = {
constructor: FormValidator,
handleEvent: function(event) {
switch (event.type) {
case 'input':
this.validateInput(event.target);
break;
case 'submit':
if (!this.validateInputs(this.form.elements))
event.preventDefault();
break;
}
},
validateInput: function(input) {
var rule = this.rules[input.name];
var success = this.defaultRule(input);
if (rule)
success = rule(input) && success;
if (success) {
input.setAttribute('aria-invalid', 'false');
input.classList.remove('state-error');
input.classList.add('state-success');
} else {
input.setAttribute('aria-invalid', 'true');
input.classList.remove('state-success');
input.classList.add('state-error');
}
return success;
},
validateInputs: function(inputs) {
var success = true;
for (var i = 0; i < inputs.length; i++) {
success = this.validateInput(inputs[i]) && success;
}
return success;
},
defaultRule: function(input) {
var value = input.value;
var required = input.hasAttribute('required');
var pattern = input.getAttribute('pattern') || '.*';
return value ? new RegExp('^' + pattern + '$').test(value) : !required;
}
};
</script>
<script>
var form = document.querySelector('form');
var validator = new FormValidator(form, {
'passwordConfirm': function(input) {
return input.value == input.form.password.value;
}
});
</script>