Question

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

这是我的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;
});

Answer 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
});

Answer 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 */ });
}

Answer 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;
}

Answer 4

这是一个非常简单的函数，用于在任何输入为空的情况下使表单无效：

AWS_SDK_LOAD_CONFIG=1

function validateForm(data){ var is_valid = true; $.each(data, function(id, obj) { if(obj.value === "") { is_valid = false; } }); return is_valid; }参数应为json序列化形式。

用法：

data

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

4 个答案: