jQuery單擊覆蓋jQuery表單驗證器

Question

我正在使用jQuery表單驗證器插件來驗證表單，也正在使用jQuery click通過AJAX替換表單。 兩者都可以很好地工作，但是當我同時使用單擊時，將覆蓋驗證並且表單不驗證

關於如何將它們一起使用的任何幫助，深表感謝

這是代碼，驗證未完成但確實有效

$(document).ready(function() {

    $("#payment_details").validate({
        rules: {
            customerID: {
                required: true
            },
            amount: {
                required: true
            }
        }, //end rules
        messages: {} //end messages
    })

    $("#createPayment").click(function() {

        //alert("in function");
        var customerID = $("#customerID").val();
        var amount = $("#amount").val();
        var paymentType = $("#payment_type").val();
        var paymentDate = $("#payment_date").val();
        var paymentMethod = $("#payment_method").val();
        if (paymentMethod == "Cheque") {
            var pbRef = $("#pb_ref").val();
        } else {
            var pbRef = "empty"
        }
        var staffMember = $("#staff_member").val();

        // Returns successful data submission message when the entered information is stored in           database.
        var dataString = 'customerID=' + customerID + '&amount=' + amount + '&paymentType=' + paymentType + '&paymentDate=' +
            paymentDate + '&paymentMethod=' + paymentMethod + '&pbRef=' + pbRef + '&staffMember=' + staffMember;

        alert(dataString);


        //AJAX code to submit form.
        $.ajax({
            type: "POST",
            url: "createPayment.php",
            data: dataString,
            cache: false,
            success: function(result) {
                var paymentID = result;
                alert(paymentID);
            }
        });

        return false;
    });
}); 

Answer 1

嘗試在$（“＃createPayment”）。click函數中將驗證器作為函數調用，而不是在document.Ready中調用驗證器。 確實需要在document.Ready中調用它。

Answer 2

您在click事件處理程序中返回false，因此不會為click事件執行更多代碼，包括驗證。 （從jquery事件處理程序返回false會停止傳播並取消默認行為，請參閱此問題 ）

您需要在點擊處理程序上手動驗證表單，然后再提交表單：

$("#createPayment").click(function(){
    var isValid = $('#payment_details').validate().form();
    if(!isValid) return false;

    //your current code posting the form using ajax

});