jQuery click overiding jQuery Form Validator

Question

I am validating a form with the jQuery form validator plugin and am also submiiting the form via AJAX using jQuery click. Both of these work perfectly on their own but when I use both the click overrides the validation and the form doesn't validate

Any help on how to use these together gratefully received

Here is the code, the validation is not complete but does work

$(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;
    });
});

e.preventDefault will stop the behaviour of a click.. http://api.jquery.com/event.preventdefault/ — FlemGrem, Aug 05 '14 at 10:30

score 0 · Answer 1 · answered Aug 05 '14 at 10:32

0

Try call the validator as a function inside the $("#createPayment").click function Instead of calling validator in document.Ready. It is really required to call it in document.Ready.

answered Aug 05 '14 at 10:32

Khaleel

1,212
2
16
34

score 0 · Answer 2 · edited May 23 '17 at 12:29

0

You return false in the click event handler, so no further code is executed for the click event, including validation. (Returning false from a jquery event handler stops propagation and cancels the default behaviour, see this question)

You will need to manually validate the form on your click handler before submitting the form:

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

    //your current code posting the form using ajax

});

edited May 23 '17 at 12:29

Community

1
1

answered Aug 05 '14 at 10:33

Daniel J.G.

34,266
9
112
112

Hi Daniel,When I tried this it submitted the form and then started the validation! – bob Aug 05 '14 at 11:45
Have you placed the code validating the form at the begining of the click handler? What is the value of `isValid`? – Daniel J.G. Aug 05 '14 at 12:18

jQuery click overiding jQuery Form Validator

2 Answers2