如果表单字段为空，则防止使用 ajax 提交表单答案

【问题标题】：Prevent form submit with ajax if form fields are empty如果表单字段为空，则防止使用 ajax 提交表单
【发布时间】：2011-10-27 10:25:13
【问题描述】：

我在使用简单的表单时遇到了一些问题。如果字段为空，我似乎无法阻止提交表单。有没有一种简单的方法可以检查字段是否为空，然后阻止表单提交？

这是我的 html 表单：

<form method="post" name="simpleForm" id="simpleForm" action="handler.php">
<fieldset>
    <legend>Info</legend>
            <p><label for="name">Name</label><br>
            <input id="name" name="name" class="text" /></p>
            <p><label for="email">Email</label><br>
            <input id="email" name="email" class="text" /></p>

    <legend>Questions</legend>
            <p><label for="qs_1">Question 1</label><br>
            <input id="qs_1" name="qs_1" class="text" /></p>
            <p><label for="qs_2">Question 2</label><br>
            <input id="qs_2" name="qs_2" class="text" /></p>
            <p><label for="qs_3">Question 3</label><br>
            <input id="qs_3" name="qs_3" class="text" /></p>

</fieldset>             

<p><input type="submit" name="submit" value="Send" id="sub_btn" /></p>
</form>

这是我的 javascript：

$("form#simpleForm").submit(function() {

        var name     = $('#name').attr('value');
        var email    = $('#email').attr('value');
        var qs_1     = $('#qs_1').attr('value');
        var qs_2     = $('#qs_2').attr('value');
        var qs_3     = $('#qs_3').attr('value');



            $.ajax({
                type: "POST",
                url: "handler.php",
                data: "name="+ name +"& email="+ email +"& qs_1="+ qs_1 +"& qs_2="+ qs_2 +"& qs_3="+ qs_3,
                success: function(){
                    $('form#simpleForm').hide(function(){$('div.success').fadeIn();});

                }
            });
        return false;
});

【问题讨论】：

不要使用$('#name').attr('value')，而是使用$('#name').val()
不要使用.attr('value')，而是使用.val()。更好的跨浏览器兼容性。

标签： javascript jquery ajax

【解决方案1】：

使用e.preventDefault() 取消表单提交。如果您不想发送 AJAX 调用，请添加条件检查。另外，请使用.val() 而不是.attr("value")。

$("form#simpleForm").submit(function(ev) {
    ev.preventDefault();

    var name     = $('#name').val();
    var email    = $('#email').val();
    var qs_1     = $('#qs_1').val();
    var qs_2     = $('#qs_2').val();
    var qs_3     = $('#qs_3').val();

    //This condition will only be true if each value is not an empty string
    if(name && email && qs_1 && qs_2 && qs_3){
        $.ajax({
            type: "POST",
            url: "handler.php",
            data: "name="+ name +"& email="+ email +"& qs_1="+ qs_1 +"& qs_2="+ qs_2 +"& qs_3="+ qs_3,
            success: function(){
                $('form#simpleForm').hide(function(){$('div.success').fadeIn();});

            }
        });
     }
     return false; //IE
});

【讨论】：

preventDefault() 在 IE 中不起作用，对于 IE，使用 event.cancelBubble = true;
提问者已经拥有的 return false; 应该做同样的事情。问题是如果任何/所有字段为空，如何防止提交。
@GregL Preventdefault 是额外的。我建议对我的答案进行 3 处更改。
@RobW，我一定是瞎了眼，一开始我以为你的答案是错误的，但我显然错了。对不起，先生。
完美运行！从中学到了很多。谢谢！

【解决方案2】：

一般来说，如果您从提交处理程序返回 false，它将阻止以标准（非 ajax）方式提交表单，但我看到您已经这样做了 - 如果您想提交，您需要这样做它通过 ajax 代替，否则它将使 ajax 调用正常提交。

因此，您验证所需的只是进行 if 测试，仅在验证通过时才调用 $.ajax()：

if (name != "" && etc...) {
   $.ajax({ /* your existing ajax code here */ });
}

编辑：您还可以使用单个 jQuery 选择器测试没有空白字段：

if ($("#simpleform :text[value='']").length === 0) {
   $.ajax({ /* your existing ajax code here */ });
}

【讨论】：

【解决方案3】：

在发出 ajax 请求之前进行 if 检查：

if(name != '' && email != '' ...)
{
//send request is true
$.ajax({
                type: "POST",
                url: "handler.php",
                data: "name="+ name +"& email="+ email +"& qs_1="+ qs_1 +"& qs_2="+ qs_2 +"& qs_3="+ qs_3,
                success: function(){
                    $('form#simpleForm').hide(function(){$('div.success').fadeIn();});

                }
            });

}

else{
return false;
}

【讨论】：

很好的尝试，但请注意其他答案中的要点 - 无论 if 条件是否通过，您都需要返回 false，否则表单将执行正常提交，这可能是不希望的。

【解决方案4】：

这是一个非常简单的函数，可以在任何输入为空时使表单无效：

     function validateForm(data){
         var is_valid = true;
         $.each(data, function(id, obj) {
             if(obj.value === "") {
                 is_valid = false;
             }
         });   
         return is_valid;         
     }

data 参数应该是 json 序列化形式。

用法：

    var form_data = $( "#my_form" ).serializeArray();
    var is_valid = validateForm(form_data);

    if(is_valid === true){
        // your ajax code
    }

【讨论】：