prevent形式使用Ajax提交表单，如果字段为空 [英] Prevent form submit with ajax if form fields are empty

问题描述

林具有一个简单的形式有些麻烦。我似乎无法prevent的形式从submiting如果字段为空。有没有一种简单的方法来检查，如果字段为空，然后prevent的形式提交？

下面是我的HTML表单：

 ＆LT;形式方法=邮报名称=simpleFormID =simpleForm行动=handler.php＆GT;
＆LT;字段集＆GT;
    ＆LT;传奇＆GT;信息＆LT; /传说＆GT;
            ＆LT; P＆GT;＆LT;标签=名与GT;名称＆LT; /标签＆gt;＆LT; BR＆GT;
            ＆LT;输入ID =名称NAME =名级=文本/＆GT;＆LT; / P＆GT;
            ＆LT; P＆GT;＆LT;标签=电子邮件＆GT;电子邮件＆LT; /标签＆gt;＆LT; BR＆GT;
            ＆LT;输入ID =电子邮件NAME =电子邮件级=文本/＆GT;＆LT; / P＆GT;

    ＆LT;传奇＆GT;问题＆LT; /传说＆GT;
            ＆LT; P＆GT;＆LT;标签=qs_1＆GT;问题1＆LT; /标签＆gt;＆LT; BR＆GT;
            ＆LT;输入ID =qs_1NAME =qs_1级=文本/＆GT;＆LT; / P＆GT;
            ＆LT; P＆GT;＆LT;标签=qs_2＆GT;问题2'; /标签＆gt;＆LT; BR＆GT;
            ＆LT;输入ID =qs_2NAME =qs_2级=文本/＆GT;＆LT; / P＆GT;
            ＆LT; P＆GT;＆LT;标签=qs_3＆GT;问题第3版; /标签＆gt;＆LT; BR＆GT;
            ＆LT;输入ID =qs_3NAME =qs_3级=文本/＆GT;＆LT; / P＆GT;

＆LT; /字段集＆GT;

＆LT; P＆GT;＆LT;输入类型=提交名称=提交值=发送ID =sub_btn/＆GT;＆LT; / P＆GT;
＆LT; /形式GT;
 

下面是我的javascript：

  $（＃形式simpleForm）。递交（函数（）{

        变种名称= $（'＃姓名）ATTR（'值'）。
        变种的电子邮件= $（'＃邮件）ATTR（'值'）。
        VAR qs_1 = $（'＃qs_1）ATTR（'值'）。
        VAR qs_2 = $（'＃qs_2）ATTR（'值'）。
        VAR qs_3 = $（'＃qs_3）ATTR（'值'）。



            $阿贾克斯（{
                键入：POST，
                网址：handler.php
                数据：NAME =+姓名+＆放大器;电子邮件=+电子邮件+＆放大器; qs_1 =+ qs_1 +＆放大器; qs_2 =+ qs_2 +＆放大器; qs_3 =+ qs_3，
                成功：函数（）{
                    $（'＃形式simpleForm'）隐藏（函数（）{$（'div.success'）淡入（）;}）;

                }
            }）;
        返回false;
}）;
 

解决方案

使用即preventDefault（）取消表单提交。如果你想不发送AJAX调用，添加一个条件检查。此外，使用 .VAL（）而不是 .attr（价值）。

  $（＃形式simpleForm）。递交（函数（EV）{
    。EV preventDefault（）;

    变种名称= $（'＃姓名）VAL（）。
    变种的电子邮件= $（'＃邮件）VAL（）。
    。VAR qs_1 = $（'＃qs_1）VAL（）;
    。VAR qs_2 = $（'＃qs_2）VAL（）;
    。VAR qs_3 = $（'＃qs_3）VAL（）;

    //这种情况只会是真实的，如果每个值不是一个空字符串
    如果（名称和放大器;＆安培;电子邮件和放大器;＆安培; qs_1和放大器;＆安培; qs_2和放大器;＆安培; qs_3）{
        $阿贾克斯（{
            键入：POST，
            网址：handler.php
            数据：NAME =+姓名+＆放大器;电子邮件=+电子邮件+＆放大器; qs_1 =+ qs_1 +＆放大器; qs_2 =+ qs_2 +＆放大器; qs_3 =+ qs_3，
            成功：函数（）{
                $（'＃形式simpleForm'）隐藏（函数（）{$（'div.success'）淡入（）;}）;

            }
        }）;
     }
     返回false; // IE
}）;
 

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:

<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:

$("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;
});

解决方案

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").

$("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
});

这篇关于prevent形式使用Ajax提交表单，如果字段为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！