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

Im having some trouble with a simple form. I can't seem to prevent the form from submiting if the fields are empty. Is there an easy way to check if the fields are empty, and then prevent the form submitting?

我有一个简单的形式有点麻烦。如果字段为空,我似乎无法阻止表单提交。有没有一种简单的方法来检查字段是否为空,然后阻止表单提交?

Here is my html form:

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

Here is my javascript:

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

3 个解决方案

#1

Use e.preventDefault() to cancel the form submission. If you want to not send an AJAX call, add a condition check. Also, use .val() instead of .attr("value").

使用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
});

#2

In a general sense if you return false from the submit handler it will prevent the form being submitted in the standard (non-ajax) way, but I see you are already doing this - which you need to if you want to submit it via ajax instead or it will make the ajax call and submit normally.

在一般意义上,如果你从提交处理程序返回false,它将阻止表单以标准(非ajax)方式提交,但我看到你已经这样做 - 如果你想通过ajax提交它,你需要这样做相反,它将进行ajax调用并正常提交。

So all you need for your validation is to put an if test that only makes the $.ajax() call if validation passes:

因此,验证所需要的只是在验证通过时进行仅进行$ .ajax()调用的if测试:

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

EDIT: you can also test that there are no blank fields with a single jQuery selector:

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

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

#3

Just have an if check before making ajax request:

在发出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;
}

#1