开发者

Form validation with jquery - return false

Can some one tell my why the folowing code doesn't work. It alerts as it should. But it return true afterwards, even if a field is empty.

<form id="theform" method="post" action="mailme.php">
<input id="field1" name="a" value="field1" type="text" />
<input id="field开发者_高级运维2" 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>


You're returning from the .each() callback function, a return false breaks that, but doesn't return from the outer function (your submit handler), instead you should do something like this:

$('#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;
});

In this it finds the first empty element , sets the result to false and returns in one statement, then returns the result from the outer function...if there were no empty fields, this would still be true.


You can also use jQuery's filter() function with a callback function, and then testing the resulting array for its size, returning true if it's zero.

$('#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;
});


Your two return statements are in different contexts, so your each function returns false, but that is not the same as a return statement for your submit function, which will always return true on the last line.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜