Question

我有以下JavaScript函数：

$('div.nextStepBilling').click(function (e) {
    if ($(this).parent().parent().attr("id") == "newCardDiv") {
        $('form#myForm').validate({
            rules: {
                cardHolder: "required",
                cardNumber: {
                    required: true,
                    minlength: 15,
                    maxlength: 16
                },
                CVV: {
                    required: true,
                    minlength: 3,
                    maxlength: 4
                }
            },
            messages: {
                cardHolder: "Card holder name is required",
                cardNumber: {
                    required: "Credit card number is required",
                    minlength: "Credit card must be at least 15 digits long",
                    maxlength: "Credit card must be at most 16 digits long"
                },
                CVV: {
                    required: "CVV (security code) is required",
                    minlength: "CVV must be at least 3 digits long",
                    maxlength: "CVV must be at most 4 digits long"
                }
            }
        });
        if ($('form#myForm').valid()) {
            alert("valid");
        } else {
            alert("invalid");
        }
    }
});

当我点击正确的div.nextStepBilling时，它总是提醒有效，即使这些输入中没有任何内容。

我在控制台中没有出现任何错误，我可以使用$('form#myForm').validate().element("#cardHolder");使jquery验证工作。我在页面上包含了最新的jquery和jquery验证包（按正确顺序）。任何人都可以看到上述代码有什么问题吗？

Answer 1

你的问题在这里：

$('div.nextStepBilling').click(function (e) {
    if ($(this).parent().parent().attr("id") == "newCardDiv") {
        $('form#myForm').validate({
            // rules & options
            ...

由于.validate()只是插件的初始化方法，因此不测试方法。 .validate()方法只能在DOM上调用一次，准备使用您的规则初始化插件＆amp;选项。所有后续调用都将被忽略。

您可以使用the .valid() method以编程方式按需触发验证测试。

您的代码看起来应该更像......

$(document).ready(function() {

    $('form#myForm').validate({ // initialize the plugin
        // rules & options
    });

    $('div.nextStepBilling').click(function (e) {
        if ($(this).parent().parent().attr("id") == "newCardDiv") {
            $('form#myForm').valid(); // triggers a test on the form
            ...

简单DEMOS ：http://jsfiddle.net/zSq94/和http://jsfiddle.net/zSq94/1/

jQuery验证未在按钮单击时验证

1 个答案: