Показать сообщение отдельно
  #1 (permalink)  
Старый 13.08.2013, 18:40
Интересующийся
Отправить личное сообщение для Paltusssss Посмотреть профиль Найти все сообщения от Paltusssss
 
Регистрация: 26.01.2013
Сообщений: 13

Проверка полей при потере фокуса
Здравствуйте!
Никак не могу осилить следующую задачу. Есть форма с двумя текстовыми полями и кнопкой "отправить". Кнопка по умолчанию отключена и становится доступной только при условии корректного заполнения полей формы. Если введённые значения не соответствуют регулярному выражению, в блоки 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, которое запускает регулярное выражение для проверки, находит не соответствие шаблону и выводит сообщение об ошибке. То есть так, как и задумывалось, но проблема заключается в том, что второе поле, которое только получило фокус и в которое ещё не ввели данные - является пустым, а значит не соответствующим шаблону. В результате тоже подчёркивается красным цветом. Другими словами, мне нужно, что бы проверка поля осуществлялась только при потере этим полем фокуса. А здесь происходит наоборот, первое поле теряет фокус и вместо того, что бы проверить только это поле - проверяются и все остальные.
Ответить с цитированием