return false 不会阻止表单提交

Question

我有一个表单，我正在尝试对其进行一些验证，以捕获旧浏览器和 Safari（！）上的必填字段。到目前为止，我的解决方案似乎几乎工作......当我在 Safari 上提交带有空字段的表单时，会弹出错误，然后无论如何都会提交表单。我做错了什么？

我的表单如下所示：

<form id="primaryPostForm" method="POST" >

<input type="text" name="iName" id="iID" maxlength="25" required="required" value="" />

<textarea class="tipContent requiredAttr" name="taName" id="taID" maxlength="150" required="required" ></textarea> 

<input type="hidden" name="submitted" id="submitted" value="true" />
<input id="submitBtn" type="submit" value="Submit">

我的验证如下所示：

function validate(){
$('#primaryPostForm').submit(function(){
    $("#primaryPostForm .requiredAttr").each(function(){
        if($(this).val().length < 1){
        alert("Please make sure the fields are filled in - thanks");
        return false;}
    })//end each
})//end submit
}

Answer 1

return false 仅退出 each 循环。您需要存储一个可以从函数返回的结果：

function validate(){
  $('#primaryPostForm').submit(function(){
    var result = true;
    $("#primaryPostForm .requiredAttr").each(function(){
        if($(this).val().length < 1){
        alert("Please make sure the fields are filled in - thanks");
        result = false;
        return false; // exit loop
      }
    })//end each
    return result;
  })//end submit
}

Answer 2

首先，使用e.preventDefault(); 而不是return false。

回答您的问题： return false 必须在提交事件回调的范围内：

function validate(){
    $('#primaryPostForm').submit(function(e){
        var ret = true;
        $("#primaryPostForm .requiredAttr").each(function(){
            if($(this).val().length < 1){
                alert("Please make sure the fields are filled in - thanks");
                ret = false;    
            }
        });
        if(!ret){
            e.preventDefault();
        }
    });
}

更简洁直接的方法是：

$('#primaryPostForm').submit(function(e){
    var required = $(".requiredAttr", this).filter(function(){
        return !this.value;
    });
    if(required.length){
        alert("Please make sure the fields are filled in - thanks");
        e.preventDefault();
    }
});

Answer 3

试试这个，参考MDN

function validate(){
$('#primaryPostForm').submit(function(){
    var result = [];
    $("#primaryPostForm .requiredAttr").each(function(){
        if($(this).val().length < 1){
        result.push(false);
        }
    })//end each
    result.some(function(element){return (element!=false)})
    alert("Please make sure the fields are filled in - thanks");
})//end submit
}