Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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, которое запускает регулярное выражение для проверки, находит не соответствие шаблону и выводит сообщение об ошибке. То есть так, как и задумывалось, но проблема заключается в том, что второе поле, которое только получило фокус и в которое ещё не ввели данные - является пустым, а значит не соответствующим шаблону. В результате тоже подчёркивается красным цветом. Другими словами, мне нужно, что бы проверка поля осуществлялась только при потере этим полем фокуса. А здесь происходит наоборот, первое поле теряет фокус и вместо того, что бы проверить только это поле - проверяются и все остальные.
Ответить с цитированием
  #2 (permalink)  
Старый 13.08.2013, 19:07
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

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

Сообщение от danik.js
Разбей проверку полей на разные функции.
Сначала я хотел создать булеву переменную и присвоить ей значение true. В случае некорректного ввода данных в полях, она переписывалась бы на false и затем, в зависимости от состояния этой переменной делать кнопку "Отправить" доступной или - нет. Если же обработку полей я разобью на разные функции, у меня могут возникнуть сложности с анализом этой переменной.
Сообщение от danik.js
Или передавай нужное поле как аргумент
Объясните пожалуйста подробнее.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Открытие полей формы при выборе определенного radio rolph Events/DOM/Window 4 15.06.2010 18:32
Проверка имени пользователя при вводе st1512 AJAX и COMET 1 07.09.2009 09:58
Проблема с сортировкой полей MUTOgen jQuery 0 10.08.2009 01:37
Проверка статуса checkbox при xmlhttprequest vvsh AJAX и COMET 3 06.08.2009 15:51
Проверка полей формы Rush Общие вопросы Javascript 2 16.10.2008 23:44