Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Мгновенная проверка полей (https://javascript.ru/forum/misc/53469-mgnovennaya-proverka-polejj.html)

Зосимов 05.02.2015 09:25
Мгновенная проверка полей
 
всем привет.
подскажите как решить вопрос -
есть три поля формы 
<input type="text" value="" name="userName"   id="userName">
<br>
<input type="text" value="" name="phone" id="phoneNumber">
<br>
<input type="text" value="" name="email" id="userEmail">

нужно сделать JS проверку - если ВСЕ 3 поля заполонены, то например вывести алерт какой нибудь.
ну и дальше могут быть еще поля, но главное проверить эти три. на лету по ходу заполнения формы

спасибо

danik.js 05.02.2015 09:46
Так юзер только одну букву поставит в третье поле и оно будет считаться заполненным и вылезет алерт. Так и должно быть?

Зосимов 05.02.2015 10:46
нет. только если все три поля заполнены вылезет алерт

demoniqus 05.02.2015 10:52 
var fields = {
  userName: false,
  phoneNumber: false,
  userEmail: false
};
var f = function(){
  switch (this.id) {
    case 'userName':
      fields[this.id] = this.value.match(...) ? true : false;
      break;
    case 'phoneNumber':
      fields[this.id] = this.value.match(...) ? true : false;
      break;
    case 'userEmail':
      fields[this.id] = this.value.match(...) ? true : false;
      break;
  }
  var sum = 0;
  for (var key in fields) {
    sum += fields[key] ? 1 : 0;
  }
  sum === 3 && alert('message')
};
$('#userName').change(f);
$('#phoneNumber').change(f);
$('#userEmail').change(f);


Если необходимо. можно подвесить функцию f на keyup события, чтобы отслеживать при каждом нажатии клавиши, однако это не решает проблем при использовании мыши для редактирования содержимого поля

Зосимов 05.02.2015 11:23
Спасибо demoniqus,
попробую

Зосимов 05.02.2015 11:30
Цитата:
Сообщение от demoniqus (Сообщение 355092) 
$('#userName').change(f);
$('#phoneNumber').change(f);
$('#userEmail').change(f);


Если необходимо. можно подвесить функцию f на keyup события, чтобы отслеживать при каждом нажатии клавиши, однако это не решает проблем при использовании мыши для редактирования содержимого поля

нашел функцию blur но только не совсем понял как ее использовать при проверке трех полей. или никак?
$('#name').blur(function(){}

Зосимов 05.02.2015 11:36
demoniqus,
с вашим примером не получается сделать проверку. ошибку выдает на строке case 'userName':
09
fields[this.id] = this.value.match(...) ? true : false;

ksa 05.02.2015 11:44
Цитата:
Сообщение от Зосимов
только если все три поля заполнены вылезет алерт
Как понять, что поле "заполнено"? Поскольку тебе объяснили выше
Цитата:
Сообщение от danik.js
Так юзер только одну букву поставит в третье поле и оно будет считаться заполненным

demoniqus 05.02.2015 12:10
Цитата:
Сообщение от Зосимов (Сообщение 355105)
demoniqus,
с вашим примером не получается сделать проверку. ошибку выдает на строке case 'userName':
09
fields[this.id] = this.value.match(...) ? true : false;
Ну так надо же сделать правильную проверку. которую ты хочешь провести с этим полем вместо многоточия. У меня прекрасно работает и выдает alert

demoniqus 05.02.2015 12:10 
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" >
var fields = {
  userName: false,
  phoneNumber: false,
  userEmail: false
};
var f = function(){
  switch (this.id) {
    case 'userName':
      fields[this.id] = this.value.match(/[\s\w]+/) ? true : false;
      break;
    case 'phoneNumber':
      fields[this.id] = this.value.match(/[\d]+/) ? true : false;
      break;
    case 'userEmail':
      fields[this.id] = this.value.match(/[\d\w._]+@[\d\w._]+/) ? true : false;
      break;
  }
  var sum = 0;
  for (var key in fields) {
    sum += fields[key] ? 1 : 0;
  }
  sum === 3 && alert('message')
};
$(function(){
	$('#userName').change(f);
	$('#phoneNumber').change(f);
	$('#userEmail').change(f);
})

</script>


</head>
<body>
<input type="text" id="userName" /><br />
<input type="text" id="phoneNumber" /><br />
<input type="text" id="userEmail" /><br />
</body>
</html>

demoniqus 05.02.2015 12:35
Цитата:
Сообщение от Зосимов (Сообщение 355101)
нашел функцию blur но только не совсем понял как ее использовать при проверке трех полей. или никак?
$('#name').blur(function(){}
blur возникает при потере фокуса элементом. Change также возникнет при потере фокуса, но при условии, что значение изменилось. Возникает проблема проверки по мере ввода и, если пользователь по какой-то причине не уводит фокус из поля (например, если это последнее поле и дальше идти некуда)


Часовой пояс GMT +3, время: 00:02.