Question

在表单中查看多个元素时，我希望仅在所有元素成功验证后启用提交按钮。这就是我的尝试： -

$('#beta_signup_form').validate({
    rules: {
        name: {
            required: true,
            minlength: 4
        },
        email: {
            required: true,
            email: true 
        }
    },
    focusCleanup: true,
    onkeyup: false,
    errorElement: "span",
    submitHandler: function(form) {
        if ($('#beta_signup_form').valid()) {
            console.log("now we enable the submit button!");
        }   
    }

});

更新

在我们启用提交按钮之前，我希望触发submitHandler和if if ($('#beta_signup_form').valid())条件来检查我们的所有字段是否有效，以便用户可以点击它来制作ajax致电提交表格。

但不知何故，当所有字段都有效时，不会触发任何内容。

我弄清楚我的错误是什么，submitHandler属性与检测“所有字段已验证”事件无关。如果我单击表单按钮，submitHandler属性才会被触发，这不是我需要的。

所以我的问题是 - 我需要绑定哪个事件？当表单中的所有字段验证时，是否有可用于设置触发器的属性？

这是表单html代码： -

    <form id="beta_signup_form" postUrl="{% url 'signups_beta_users' %}" method="post" csrf_token="{{ csrf_token }}">{% csrf_token %}
        <div>
            <input type="text" id="name" name="name" placeholder="Name" />
        </div>
        <div>
            <input type="email" id="email" name="email" placeholder="Email address" />
        </div>
        <button class="btn btn-success" type="submit" id="request-trial" href="#request-for-free-trial">Notify Me</button>
        <div class="loading"></div>
    </form>

Answer 1

此代码适用于我（请参阅此处：http://jsfiddle.net/tCpXT/）：

            <form id="beta_signup_form" postUrl="" method="post">
                <div>
                    <input type="text" id="name" name="name" placeholder="Name" />
                </div>
                <div>
                    <input type="email" id="email" name="email" placeholder="Email address" />
                </div>
                <button class="btn btn-success" type="submit" id="request-trial" href="#request-for-free-trial">Notify Me</button>
                <div class="loading"></div>
            </form>
    <script type="text/javascript">
            $(document).ready(function() {
                $("#beta_signup_form").validate({
                rules: {
                    name: {
                        required: true,
                        minlength: 4
                    },
                    email: {
                        required: true,
                        email: true 
                    }
                },
                submitHandler: function(form) {
                    if ($("#beta_signup_form").valid()) {
                        alert('now we enable the submit button!');
                    }   
                }
                });

            });
            </script>

Answer 2

我的回答：

$(document).ready(function() {
    $("#beta_signup_form").validate({
        rules: {
            name: {
                required: true,
                minlength: 4
            },
            email: {
                required: true,
                email: true
            }
        },
        submitHandler: function(form) {
            alert('submitted');
        }
    });
});

我发布我的答案以回应the previously accepted answer，以证明您不需要任何特殊功能来执行OP的要求。 .validate()插件默认情况下的行为与此类似。

这是接受的答案中的jsFiddle：http://jsfiddle.net/99mbLp1b/

在该答案中，唯一的区别是submitHandler中使用的这段条件代码。

submitHandler: function(form) {

    if ($("#beta_signup_form").valid()) {
        alert('now we enable the submit button!');
    }  

}

As per the documentation，submitHandler是＆＃34;回调，用于在表单有效时处理实际提交。＆＃34;

因此，如果仅在表单有效时调用submitHandler，那么整个条件检查完全是多余的并且是不必要的......

if ($("#beta_signup_form").valid()) { ... };

它始终是true，因为如果表单已经无效，您甚至都不会进入submitHandler函数。

请参阅演示以获取证明：http://jsfiddle.net/uehu47w1/

如您所见，它的运作方式与the jsFiddle within the other answer相同。

Answer 3

也许你还必须测试0（见这里：The jQuery Validation `valid()` method returns 0 when required is not true）

所以它会是：

 if (($('#beta_signup_form').valid())||($('#beta_signup_form').valid()=="")) {
        console.log("now we enable the submit button!");
    }

jquery验证：仅当所有观察元素都有效时才启用提交按钮

3 个答案: