jquery - 使用 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;
});

在此，它找到第一个空元素，将结果设置为false并在一个语句中返回，然后从外部函数...如果没有空字段，这仍然是 true。