Форум

Зосимов · #1 (**permalink**) 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 · #2 (**permalink**) 05.02.2015, 09:46

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

Зосимов · #3 (**permalink**) 05.02.2015, 10:46

нет. только если все три поля заполнены вылезет алерт

demoniqus · #4 (**permalink**) 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 события, чтобы отслеживать при каждом нажатии клавиши, однако это не решает проблем при использовании мыши для редактирования содержимого поля

Зосимов · #5 (**permalink**) 05.02.2015, 11:23

Спасибо demoniqus,
попробую

Зосимов · #6 (**permalink**) 05.02.2015, 11:30

Сообщение от demoniqus

$('#userName').change(f);
$('#phoneNumber').change(f);
$('#userEmail').change(f);

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

нашел функцию blur но только не совсем понял как ее использовать при проверке трех полей. или никак?

$('#name').blur(function(){}

Зосимов · #7 (**permalink**) 05.02.2015, 11:36

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

ksa · #8 (**permalink**) 05.02.2015, 11:44

Сообщение от Зосимов

только если все три поля заполнены вылезет алерт

Как понять, что поле "заполнено"? Поскольку тебе объяснили выше

Сообщение от danik.js

Так юзер только одну букву поставит в третье поле и оно будет считаться заполненным

demoniqus · #9 (**permalink**) 05.02.2015, 12:10

Сообщение от Зосимов

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

Ну так надо же сделать правильную проверку. которую ты хочешь провести с этим полем вместо многоточия. У меня прекрасно работает и выдает alert

demoniqus · #10 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript