jquery number validation not working consistently

Question

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

Could you provide also the html of this particular form?

trincot
– trincot

2015-11-09 19:45:44 +00:00
Commented Nov 9, 2015 at 19:45 — trincot
– trincot, Commented Nov 9, 2015 at 19:45

DinoMyte · Accepted Answer · 2015-11-09 20:01:36Z

1

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

answered Nov 9, 2015 at 20:01

DinoMyte

8,8781 gold badge21 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sparky Over a year ago

Click handler is not needed and ajax belongs inside of plugin's submitHandler option.

DinoMyte Over a year ago

Yes, you may do that too. Call specific validate related handlers.

Sparky · Accepted Answer · 2015-11-09 20:27:24Z

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/

Collectives™ on Stack Overflow

jquery number validation not working consistently

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related