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”）中的函数调用。单击函数而不是在document.Ready中调用验证器。确实需要在document.Ready中调用它。

Answer 2

您在click事件处理程序中返回false，因此不会为click事件执行更多代码，包括验证。（从jquery事件处理程序返回false会停止传播并取消默认行为，请参阅this question）

在提交表单之前，您需要在点击处理程序上手动验证表单：

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

    //your current code posting the form using ajax

});

jQuery单击覆盖jQuery Form Validator

2 个答案: