Jquery validate submitHandler not getting called

February 01, 2018

Introduction

I'm using jquery to validate my form submitted, and I've also defined a submitHandler function on submit of form. But, the issue is that submitHandler is not being called.

Code that I have is:

handleSubmit() {
        this.ui.form.validate({
            debug: false,
            highlight: function (element) {
                $(element).closest('.form-group').addClass('has-error');
            },
            unhighlight: function (element) {
                $(element).closest('.form-group').removeClass('has-error');
            },
            errorElement: 'span',
            errorClass: 'help-block',
            errorPlacement: function (error, element) {
                if (element.parent('.assertion-group').length) {
                    error.insertAfter(element.parent());
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function () {
                   //my code to submit
            }.bind(this)
        });
    },

Solution

I was exhausted in searching for the issue, and debugging. After closely examining the html form, I checked html of my button.

It was:

  
<button class="btn btn-success" id="buttonAction" type="button">Submit</button>

I changed it to:

  
<button class="btn btn-success" id="buttonAction" type="submit">Submit</button>

So, I needed to change button type from the button to submit. And, the problem resolved. Huh

jqueryform validationjquery form validationbackendhtml

Similar Posts

Latest Posts