javascript - 尝试使用 .submit 在表单提交上触发 jquery 验证

Question

但是当我点击提交时它没有触发。它提交但不执行任何操作。有任何想法吗？警报甚至没有被调用:(

我正在执行此操作的页面是我的结账页面:

http://rsatestamls.kaliocommerce.com

(购物车中需要有产品才能继续结帐)

我的 JavaScript 代码是:

<script>

$(document).ready(function () {
    $("#Method input:checkbox").change(function () {
        if (this.checked) {
            var checkname = $(this).attr("name");
            $('input[type=checkbox][id=OnAccount]').prop('value', 'True')
            $("input:checkbox[name='" + checkname + "']").not(this).removeAttr("checked");
        } else {
            $('input[type=checkbox][id=OnAccount]').val('No');
        }
    });
    $("#CheckoutOptions input:checkbox").change(function () {
        if (this.checked) {
            var checkname = $(this).attr("name");
            $("input:checkbox[name='" + checkname + "']").not(this).removeAttr("checked");
        }
    });
});

$("#CheckOut").submit(function (event) {
    alert("Handler for .submit() called.");
    jQuery.validator.setDefaults({
        debug: false,
        success: "valid"
    });
    $("#CheckOut").validate({
        rules: {
            FirstName: {
                required: true
            },
            LastName: {
                required: true
            },
            Email: {
                required: true,
                email: true
            },
            Phone: {
                required: true,
                digits: true
            },
            Address1: {
                required: true
            },
            City: {
                required: true
            },
            PostalCode: {
                required: true,
                digits: true
            },
            Country: {
                required: true
            },
            State: {
                required: true
            },
            pwd: {
                required: true
            },
            pwd_confirm: {
                required: true
            },
            FName_SHIP: {
                required: true
            },
            LName_Ship: {
                required: true
            },
            Phone_Ship: {
                required: true,
                digits: true
            },
            Address1_Ship: {
                required: true
            },
            City_Ship: {
                required: true
            },
            PostalCode_SHIP: {
                required: true,
                digits: true
            },
            COUNTRY_SHIP: {
                required: true
            },
            State_SHIP: {
                required: true
            },
            NameOnCard: {
                required: {
                    depends: function (element) {
                        return $("#CCMethod").is(":checked");
                    }
                }
            },
            CreditCardType: {
                required: {
                    depends: function (element) {
                        return $("#CCMethod").is(":checked");
                    }
                }
            },
            CardNumber: {
                required: {
                    depends: function (element) {
                        return $("#CCMethod").is(":checked");
                    }
                }
            },
            CardExpMonth: {
                required: {
                    depends: function (element) {
                        return $("#CCMethod").is(":checked");
                    }
                }
            },
            CardExpYear: {
                required: {
                    depends: function (element) {
                        return $("#CCMethod").is(":checked");
                    }
                }
            },
            CVC: {
                required: {
                    depends: function (element) {
                        return $("#CCMethod").is(":checked");
                    }
                }
            },
            customernumber: {
                required: {
                    depends: function (element) {
                        return $("#OnAccount").is(":checked");
                    }
                }
            }
        }
    });
});
populateCartTotal();

</script>   

Answer 1

您的 submit 处理程序不在您的 $(document).ready block 中，但应该在。处理程序永远不会被附加。

事实上，您根本不应该在此处使用 submit 处理程序。只需将您的验证调用放在 ready block 中即可。请参阅此处的演示:http://jquery.bassistance.de/validate/demo/

<script>

$(document).ready(function () {
    $("#Method input:checkbox").change(function () {
        if (this.checked) {
            var checkname = $(this).attr("name");
            $('input[type=checkbox][id=OnAccount]').prop('value', 'True')
            $("input:checkbox[name='" + checkname + "']").not(this).removeAttr("checked");
        } else {
            $('input[type=checkbox][id=OnAccount]').val('No');
        }
    });
    $("#CheckoutOptions input:checkbox").change(function () {
        if (this.checked) {
            var checkname = $(this).attr("name");
            $("input:checkbox[name='" + checkname + "']").not(this).removeAttr("checked");
        }
    });

    // move this stuff to here
    jQuery.validator.setDefaults({
        debug: false,
        success: "valid"
    });
    $("#CheckOut").validate({
        rules: {
            // all those rules here
        }
    });
});

populateCartTotal();