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
