Здравствуйте!
Никак не могу осилить следующую задачу. Есть форма с двумя текстовыми полями и кнопкой "отправить". Кнопка по умолчанию отключена и становится доступной только при условии корректного заполнения полей формы. Если введённые значения не соответствуют регулярному выражению, в блоки div, находящиеся над полями выводятся сообщения об ошибках, окрашенные красным цветом, если данные корректны - рамка становится зелёной и кнопка становится доступной. Вот код:
HTML:
<div id="divName" class="warning"></div>
ФИО:<input type="text" id="name" placeholder="Иванов Иван Иванович" onFocus="className='styleField'" onBlur="regName()"/><br><br>
<div id="divBirthday" class="warning"></div>
Дата рождения:<input type="text" id="birthday" placeholder="21.11.1984" onFocus="className='styleField'" onBlur="regName()"/><br><br>
Javacript:
function regName(){
//Проверяем поле ФИО
var name = document.getElementById("name").value;
var name_regV = /[а-яА-я]+\s[а-яА-я]+\s[а-яА-я]+$/gi;
if (name.match(name_regV) == null){
document.getElementById("divName").innerHTML = "Пожалуйста, введите ФИО в формате: Иванов Иван Иванович!";
document.getElementById("name").style.border="2px solid red";
}
else {
document.getElementById("divName").innerHTML = "";
document.getElementById("name").style.border="2px solid green";
}
//Проверяем поле Дата рождения
var birthday = document.getElementById("birthday").value;
var birthday_regV = /^\d{1,2}\.\d{1,2}\.\d{4}$/;
if (birthday.match(birthday_regV) == null) {
document.getElementById("divBirthday").innerHTML = "Пожалуйста, введите дату в формате 12.07.1958";
document.getElementById("birthday").style.border="2px solid red";
}
else {
document.getElementById("divBirthday").innerHTML = "";
document.getElementById("birthday").style.border="2px solid green";
}
}
Теперь, когда в первое поле вводишь не верные данные и переходишь ко второму полю срабатывает событие onBlur, которое запускает регулярное выражение для проверки, находит не соответствие шаблону и выводит сообщение об ошибке. То есть так, как и задумывалось, но проблема заключается в том, что второе поле, которое только получило фокус и в которое ещё не ввели данные - является пустым, а значит не соответствующим шаблону. В результате тоже подчёркивается красным цветом. Другими словами, мне нужно, что бы проверка поля осуществлялась только при потере этим полем фокуса. А здесь происходит наоборот, первое поле теряет фокус и вместо того, что бы проверить только это поле - проверяются и все остальные.