如果为空字段，如何停止表单提交？答案

【问题标题】：how to stop form submit if empty fields?如果为空字段，如何停止表单提交？
【发布时间】：2012-06-26 21:27:21
【问题描述】：

我的网站仅基于一个php 索引文件，该文件根据标题变量更改网站内容。 www.mydomain.com/?page=contact 加载并显示我让用户填写的表格。

我有一些jQuery，应该检测是否有任何缺失的字段：

$("form").submit(function() {
    var isFormValid = true;
    $(".required").each(function() {
        if ($.trim($(this).val()) == "") {
            $(this).addClass("highlight");
            isFormValid = false;
        } else {
            $(this).removeClass("highlight");
        }
        if (!isFormValid) alert("Please fill in all the required fields (indicated by *)");
        return isFormValid;
    });
});

但它不起作用....

【问题讨论】：

标签： php jquery forms

【解决方案1】：

将return isFormValid 置于循环之外（否则您将一次又一次地覆盖其值）：

$("form").submit(function() {
    var isFormValid = true;
    $(".required").each(function() {
        if ($.trim($(this).val()) == "") {
            $(this).addClass("highlight");
            isFormValid = false;
        } else {
            $(this).removeClass("highlight");
        }

    });

    if (!isFormValid) alert("Please fill in all the required fields (indicated by *)");
    return isFormValid; // put out of loop
});

【讨论】：

实际上可以在两个地方都返回它，在each loop 中返回它只会取消循环的其余部分，但你是绝对正确的，必须在外面完成
@NoahPassalacqua：我已经更新了代码，如果条件低于也移动了
moved if condition out of loop ` if (!isFormValid) alert("请填写所有必填字段(用*表示)"); `
您还验证单选按钮和复选框吗？
@NoahPassalacqua：你看val() 不适用于单选按钮。在你的循环中，你必须检查循环元素是否是单选按钮并使用is(':checked')

【解决方案2】：

也许是这样的？

$("form").submit(function() {
    var isFormValid = true;
    $(".required").each(function() {
        if ($.trim($(this).val()) == "") {
            $(this).addClass("highlight");
            isFormValid = false;
        } else {
            $(this).removeClass("highlight");
        }
    });
    // the following lines should be placed here
    if (!isFormValid) {
        alert("Please fill in all the required fields (indicated by *)");
    }
    return isFormValid;
});

甚至更短：

$("form").submit(function() {
    var isFormValid = $(".required").removeClass("highlight").filter(function() {
        return $.trim(this.value) == "";
    }).addClass("highlight").length == 0;

    if (!isFormValid) {
        alert("Please fill in all the required fields (indicated by *)");
    }
    return isFormValid;
});

演示： http://jsfiddle.net/YS6gw/

【讨论】：

【解决方案3】：

Can you post the html works perfectly fine for me. 
Here is my Code :
------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>

    <script type="text/javascript"  src="http://code.jquery.com/jquery-latest.min.js"></script>


    <script type="text/javascript">
        $(document).ready(function(){
            $("form").submit(function() {
                var isFormValid = true;
                $(".required").each(function() {
                    if ($.trim($(this).val()) == "") {
                        $(this).addClass("highlight");
                        isFormValid = false;
                    } else {
                        $(this).removeClass("highlight");
                    }
                    if (!isFormValid) alert("Please fill in all the required fields (indicated by *)");
                    return isFormValid;
                });
            });

        });

    </script>

    <style type="text/css">
        #divMain {vertical-align: bottom;}
        .div1_style {background: #ffe4b5}
        .div2_style {background: #79b7e7}
        .highlight {background: #cd0a0a}
        .div_disabled_style {background: #6f6e73}
    </style>
</head>
<body>
<form action="#" method="post">
<div id="divMain" align="center">
    <div id="div1" class="div2_style">
        <input type="checkbox" id="checkBox1">
        <input type="text" class ="required"  id="text1"/>
        <input type="text" class ="required" id="text2"/>
        <input type="text" class ="required" id="text3"/>
        <button type="submit" id="btnSubmit">Submit</button>
    </div>
</div>
</form>
</body>
</html>

【讨论】：