~/issues/43-jquery-validate-submithandler-not-getting-called.md

Jquery validate submitHandler not getting called

1 min readFebruary 01, 2018by Gorav Singal#jquery#form-validation#jquery-form-validation
// TL;DR

The submitHandler callback in jQuery validation may not fire if the validate method is called incorrectly or the form element selector is wrong; ensure proper configuration of the validate plugin.

Jquery validate submitHandler not getting called

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

$ subscribe --weekly

One deep dive a week, in your inbox

System design, AI engineering, trading systems and interview prep. Tested code, real numbers. Free, and you can unsubscribe any time.

or read it on gyanbyte.substack.com

Share

Related Posts

Python SMTP Email Code - Sender Address Rejected - Not Owned By User

Python SMTP Email Code - Sender Address Rejected - Not Owned By User

Introduction In a normal email sending code from python, I’m getting following…

Explaining issue&#58; response to preflight request doesn't pass access control check

Explaining issue&#58; response to preflight request doesn't pass access control check

You are developing a nodejs web application having some UI and backend APIs…

Backend Performance: Kill N+1, Add the Index, Cache What's Hot

Backend Performance: Kill N+1, Add the Index, Cache What's Hot

Ask where a slow backend spends its time and the honest answer is almost always…

Fix Drupal MySQL Error: Got a Packet Bigger Than max_allowed_packet

Fix Drupal MySQL Error: Got a Packet Bigger Than max_allowed_packet

Introduction While this topic may applicable to all mysql/mariadb users who…

Solving Jboss Wildfly Oracle JDBC driver problem, with Dockerfile

Solving Jboss Wildfly Oracle JDBC driver problem, with Dockerfile

Assuming your web application is using oracle, and you are deploying your app on…

React JS router not working on Nginx docker container

React JS router not working on Nginx docker container

Problem Statement I developed a simple ReactJS application where I have used…

Latest Posts

How to Stay Valuable as a Software Engineer in the AI Era: A Practical Playbook

How to Stay Valuable as a Software Engineer in the AI Era: A Practical Playbook

In the previous article I argued that AI is not killing software engineering…

How to Review AI-Generated Code: A Checklist for Catching What the Model Missed

How to Review AI-Generated Code: A Checklist for Catching What the Model Missed

A few months back I approved a PR that was almost entirely AI-generated. It…

How to Debug AI-Generated Code: Understand First, Fix Last

How to Debug AI-Generated Code: Understand First, Fix Last

In the last article I wrote about reviewing AI code before it goes in. This one…

The Future of Software Engineering: What AI Changes, What Stays, and Where the Jobs Go

The Future of Software Engineering: What AI Changes, What Stays, and Where the Jobs Go

Every few weeks somebody sends me a scary headline — “AI will replace all…

The Transactional Outbox Pattern: Never Lose an Event Again

The Transactional Outbox Pattern: Never Lose an Event Again

This is one of those patterns that looks like nothing until you get burnt once…

Event Sourcing, Explained: Store What Happened, Not Just the Final State

Event Sourcing, Explained: Store What Happened, Not Just the Final State

Here is a question I like to ask in interviews: your bank account shows a…