1

观察表单中的多个元素，我只想在所有元素都成功验证时启用提交按钮。这是我尝试过的：-

$('#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触发和 ifif ($('#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>
4

3 回答 3

2

这段代码非常适合我（见这里：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>
于 2012-12-07T13:55:20.350 回答
2

我的答案：

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

我发布我的答案以响应先前接受的答案，以证明您不需要任何特殊功能来执行 OP 的要求。默认情况下，该.validate()插件的行为已经如此。

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

在该答案中，唯一的区别是在submitHandler.

submitHandler: function(form) {

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

}

根据文档，这submitHandler是“表单有效时处理实际提交的回调”。

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

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

它总是会是，因为如果表单还不是有效的true，你甚至永远不会进入函数。submitHandler

见演示证明：http: //jsfiddle.net/uehu47w1/

如您所见，它的运行方式与另一个 answer 中的 jsFiddle相同。

于 2012-12-11T20:48:28.260 回答
-1

也许您还必须测试 0（请参见此处：jQuery Validation `valid()` method return 0 when required is not true）

所以它会是：

 if (($('#beta_signup_form').valid())||($('#beta_signup_form').valid()=="")) {
        console.log("now we enable the submit button!");
    }
于 2012-12-07T11:08:36.997 回答