1

我有以下 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时，即使这些输入中没有任何内容，它总是会发出有效警报。

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

4

1 回答 1

2

你的问题在这里：

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

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

您将使用该.valid()方法以编程方式按需触发验证测试。

你的代码应该看起来更像这样......

$(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
            ...

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

于 2013-08-14T15:58:38.460 回答