Проверка формы с помощью jquery - возвращает false

Question

Может кто-нибудь сказать мне, почему следующий код не работает.Он предупреждает как следует.Но потом он возвращает true, даже если поле пустое.

<form id="theform" method="post" action="mailme.php">
<input id="field1" name="a" value="field1" type="text" />
<input id="field2" name="b" value="field2" type="text" />
<input id="field3" name="c" value="field3" type="text" />
<input id="field4" name="d" value="field4" type="text" />

<input type="submit" />
</form>
<script>
$('#theform').submit(function(){
    $('#theform input[type=text]').each(function(n,element){
        if ($(element).val()=='') {
             alert('The ' + element.id+' must have a value');
             return false;
        }
    });
    return true;
});

</script>

Answer 1

Вы возвращаетесь из функции обратного вызова .each(), return false прерывает ее, но не возвращает из внешней функции (вашего обработчика submit), вместо этого вы должны сделать что-токак это:

$('#theform').submit(function(){
    var result = true;
    $('#theform input[type=text]').each(function(n,element){
        if ($(element).val()=='') {
             alert('The ' + element.id + ' must have a value');
             return result = false;
        }
    });
    return result;
});

В этом он находит первый пустой элемент, устанавливает result в false и возвращает в одном выражении, затем возвращает result из внешней функции ... еслипустых полей не было, это все равно будет true.

Answer 2

Вы также можете использовать функцию jQuery filter() с функцией обратного вызова, а затем проверить полученный массив на его размер, возвращая true, если он равен нулю.

$('#theform').submit(function(event) {
  var filtered = $('#theform input[type=text]').filter(function(index) {
    if ($(this).val() == '') {
      alert('The ' + this.id + ' must have a value');

      return true;
    }

    return false;
  });

  return filtered.length == 0;
});

Answer 3

Ваши два оператора возврата находятся в разных контекстах, поэтому каждая ваша функция возвращает false, но это не то же самое, что оператор возврата для вашей функции submit, которая всегда будет возвращать true в последней строке.