Jquery validation not working second time

Question

The problem is this jquery validation is not working in my form second time. Its working first time perfectly but second time its shows error message but form is going to submit. The code is here

 (function ($, W, D) {
        var JQUERY4U = {};

        JQUERY4U.UTIL =
        {
            setupFormValidation: function () {
                //form validation rules
                $("#aspnetForm").validate({
                    rules: {
                        firstname: "required",
                        lastname: "required",
                        company: "required",
                        jobtitle: {
                            required: true,
                        },
                        phone: {
                            required: true,
                            number: true
                        },
                        email: {
                            required: true,
                            email: true
                        },

                    },
                    messages: {
                        firstname: "Please enter your first name",
                        lastname: "Please enter your last name",
                        company: "Please enter your company name",
                        jobtitle: "Please enter your job title",
                        phone: "Please enter a valid phone number",

                        email: "Please enter a valid email address",
                    },
                    submitHandler: function (form) {

                        $('#aspnetForm').on('submit', function (e) {
                            e.preventDefault();
                            if (flag) {
                                createListItem();
                            }
                        });

                        //form.submit(function (e) {
                        //    e.preventDefault();
                        //    if (flag) {
                        //        createListItem();
                        //    }
                        //});


                    }
                });
            }
        }

        //when the dom has loaded setup form validation rules
        $(D).ready(function ($) {
            JQUERY4U.UTIL.setupFormValidation();
            $('#newsletterModal').on('hidden.bs.modal', '.modal', function () {
                clearFields();
            });
            $('#newsletterModal').on('shown.bs.modal', function (e) {
                $('#lblMsg').empty();
            });
        });

    })(jQuery, window, document);

can any one help me

Answer 1

Your submitHandler callback function...

submitHandler: function (form) {
    $('#aspnetForm').on('submit', function (e) {
        e.preventDefault();
        if (flag) {
            createListItem();
        }
    });
}

Do not put a submit event handler inside of the submitHandler callback! It's unclear to me what you're trying to do but the submitHandler callback function of the plugin has already captured & replaced the default submit event of the form .

Also, whenever you declare your own submitHandler function, you are over-riding the default built into the plugin. Since I see nothing inside of your custom submitHandler that submits the form, the form will never be submitted.

You'll either need to remove the submitHandler to allow the form to be submitted (when valid) as per the default functionality OR you'll need to put $(form).submit() inside of it someplace.

submitHandler: function (form) {
    if (flag) {
        createListItem();
    }
    $(form).submit();
}

---

NOTE :

Wrapping up everything like this is superfluous, unnecessary, verbose, and arcane...

(function($,W,D) {
    var JQUERY4U = {};

    JQUERY4U.UTIL =
    {
        setupFormValidation: function() {
            $("#aspnetForm").validate({ .... });
        }
    }

    $(D).ready(function($) {
        JQUERY4U.UTIL.setupFormValidation();
    });

})(jQuery, window, document);

It serves no useful purpose other than to cause more confusion to those seeking guidance. It comes from a popular, yet poorly explained, online demo/tutorial by Sam Deering that is linked to/from many places.

The entire mess above can be removed and simply replaced by putting the .validate() method inside of the DOM ready event handler function...

$(document).ready(function() {

    $("#aspnetForm").validate({ .... });

});