CODEWITHSUNDEEP
javascriptjqueryjquery-validate
mikea80
mikea80

Reputation: 127

jquery number validation not working consistently

I am using jquery validations in a form. I haven't had many issues, however I did run into a problem in a users form where the jquery number validation isn't firing. I tested it in IE, firefox and chrome and it is not working in any of them. The weird part is that so far it seems that it is specific to this one user's form as when I go to other user forms the alerts fire fine as it does in my testing across all browsers. I was wondering if any one else has come across this problem before when using jquery validation. Below is an example of some of the jquery validation code I am using.

    var validator = $("#educationForm").validate({
            debug: true,
            errorElement: "span",
            errorClass: "help-block errortext",
            errorPlacement: function (error, element) {
                element.before(error);
            },
            success: function (label) {
                label.remove();
            },
            rules: {
                school1GPA: {
                    number: true
                },
                school2GPA: {
                    number: true
                },
                school1Units: {
                    number: true
                },
                school2Units: {
                    number: true
                },
            },
            onsubmit: false
        });

    $('.form-actions').on('click', '#btnSubmit', function (evt) {
            evt.preventDefault();
            if ($("#educationForm").valid()) {

                $.ajax({
                    type: "POST",............
        } else {
           validator.focusInvalid();
        }
    });

Upvotes: 1

Views: 456

Answers (2)

Sparky
Sparky

Reputation: 98728

  • You should not need your click handler at all. As per documentation, your ajax belongs inside of the submitHandler callback function.

  • You also should not set onsubmit to false unless you want validation blocked when the submit button is clicked.

  • debug set to true will block submission of the form.

Something more like this...

 var validator = $("#educationForm").validate({
        // debug: true, // <- this is blocking the submit entirely
        submitHandler: function(form) {
            // your ajax here
            $.ajax(...);
            return false;
        },
        errorElement: "span",
        errorClass: "help-block errortext",
        errorPlacement: function (error, element) {
            element.before(error);
        },
        success: function (label) {
            label.remove();
        },
        rules: {
            school1GPA: {
                number: true
            },
            school2GPA: {
                number: true
            },
            school1Units: {
                number: true
            },
            school2Units: {
                number: true
            },
        },
        // onsubmit: false  // <- this is preventing validation on the submit.
    });

DEMO: http://jsfiddle.net/2vv8vL79/

Upvotes: 0

DinoMyte
DinoMyte

Reputation: 8868

The issue is that you are triggering evt.preventDefault() before you could even trigger jquery validation. That is basically killing any validation statement following evt.preventDefault(). All you need to is just call $("#educationForm").valid() or jquery.validate() and then call evt.preventDefault().

 $('.form-actions').on('click', '#btnSubmit', function (evt) {

            if ($("#educationForm").valid()) {
                evt.preventDefault(); // prevents the form submission to allow ajax
                $.ajax({
                    type: "POST",............
        } else {
           validator.focusInvalid();
        }
});

Upvotes: 1

Related Questions