Грамотная валидация формы
Люди, помогите, пожалуйста :help: Никак не могу реализовать нормальную валидацию формы. Есть 4 поля: "Имя", "E-mail", "Тема", "Сообщение". Как реализовать проверку на их заполнение, чтобы выводилось сообщение о том, какие(-ое) поля(-е) не заполнены(-о) вообще, а какие(-ое) - не соответствуют(-ет) регулярным(-ому) выражениям(-ю)?
Регулярные выражения для полей имеются: 1: /^[А-Яа-яЁё]+$/ - "Имя" - одно слово на русском в любом регистре 2: <input type="email"> - "E-mail" - подскажите, пожалуйста, если есть что-то лучше 3, 4: /^[А-Яа-яЁё\W\s\d]+$/ - "Тема", "Сообщение" - все, что угодно, но только на русском |
seniormelikyan, обычно такое проверяют на стороне сервера.
|
Цитата:
|
Проблема - в том, что не получается реализовать проверку каждого условия, а не какого-то конкретного в отдельности. Мне нужно, чтобы форма не отправлялась, пока не будут соблюдены все условия. Вот мой код: Сейчас, если все поля пусты, при нажатии на кнопку "Отправить", в поле ошибки выводится "Введите свое имя на русском языке...", хотя я ожидаю "Заполните все поля". Я запутался в своих же условиях. В общем, никак я этой форме ума не дам.
window.onload = function() { form = document.forms[0], fields = form.getElementsByTagName('input'), msg = form.getElementById('required'), regExp = /^[А-Яа-яЁё\W\s\d]+$/; form.onsubmit = function(event) { for (var i = 0; i < fields.length; i++) { if (!fields[i].value) { event.preventDefault(); fields[i].className = 'invalid'; msg.innerHTML = 'Заполните обязательные поля'; } else fields[i].className = ""; if (fields[0].value.search(/^[А-Яа-яЁё]+$/)) { event.preventDefault(); msg.innerHTML = fields[0].title; fields[0].className = 'invalid'; } else if (fields[2].value.search(regExp)) { event.preventDefault(); msg.innerHTML = fields[2].title; fields[2].className = 'invalid'; } else if (fields[3].value.search(regExp)) { event.preventDefault(); msg.innerHTML = fields[3].title; fields[3].className = 'invalid'; } } } } |
А если сделать проверку, включен ли Javascript, и, если нет, вывести сообщение об ошибке с ссылкой на Google Help по включению Javascript и не пустить пользователя никуда, пока он его не включит? Можно, конечно, и на стороне сервера повозиться, но мне кажется, что такой вариант тоже вполне себе приемлем. Я прав?
|
Кто-нибудь может мне помочь?
|
<style>
input[type="text"], input[type="email"] {
width: 100px;
}
.invalid {
background: red;
}
</style>
<form id="test">
<input type="text" title="имя"></input>
<input type="email" title="email"></input>
<input type="text" title="тема"></input>
<input type="text" title="сообщение"></input>
<span id="required"></span><br>
<input type="submit" >
</form>
<script>
window.onload = function() {
var form = document.forms[0],
fields = form.querySelectorAll('input[type="text"], input[type="email"]'),
msg = document.getElementById('required'),
regExp = [/^[А-Яа-яЁё]+$/, /.+@.+\..+/i, /^[А-Яа-яЁё\W\s\d]+$/, /^[А-Яа-яЁё\W\s\d]+$/];
form.onsubmit = function(event) {
var valid = true, cnt = 0;
event.preventDefault();
Array.prototype.forEach.call(fields, function(input) {
input.classList.remove('invalid');
if(!input.value.length) {
cnt++;
}
})
if(cnt == fields.length) {
Array.prototype.forEach.call(fields, function(input) {
input.classList.add('invalid');
})
msg.innerHTML = 'Заполните обязательные поля!';
return;
}
for (var i = 0, l = fields.length; i < l; i++) {
fields[i].classList.remove('invalid');
if(!fields[i].value.match(regExp[i])) {
fields[i].classList.add('invalid');
msg.innerHTML = 'Неверно введено поле ' + fields[i].title + '!';
valid = false;
break;
}
}
if (valid) {
form.submit();
}
}
}
</script>
|
Большое спасибо :)
|
| Часовой пояс GMT +3, время: 07:34. |