Does submit get called if form is invalid?

Question

I want to know if submit gets called if my form data are not valid in html5 validation. For example I have a form id personal_info.

I use the following block to get on submit event :

$("#personal_info").submit(function(event) { event.preventDefault(); saveData("personal_info"); }); function saveData(formName){ console.log("test"); }

Is is the default behavior that the function saveData gets called on submit because even if my form is not valid the function gets called.

How to prevent submit function from being called if my form is invalid?

Try on top of submit handler: if(!$(this).valid()) return; — A. Wolff
– A. Wolff, Commented Dec 27, 2014 at 14:14
There seems to be a hard-coded call to saveData, I'd say it's very default JS behavior to execute that function. — Teemu
– Teemu, Commented Dec 27, 2014 at 14:15
It works but should on submit be called if the form is not valid. However thanks solved my problem — user2327579
– user2327579, Commented Dec 27, 2014 at 14:18
Please do not use the jquery-validate tag when the question has nothing to do with this plugin. — Sparky
– Sparky, Commented Dec 28, 2014 at 16:59

Jacob Wright · Accepted Answer · 2016-12-14 18:25:01Z

The new HTML5 validation APIs will not submit an invalid form unless you use the novalidation attribute on the form. See https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation for more information.

Community · Accepted Answer · 2017-05-23 12:24:50Z

It works but should on submit be called if the form is not valid.

Anytime your form #personal_info is submitted, the submit function will run.

The reason it may appear that the submit function isn't running, is because of this line

event.preventDefault();

This prevents the default action from taking place, which is submitting the form. So the form won't submit normally, thus your web page won't reload/refresh.

Calling submit even if the form is not valid, is just fine. Nothing wrong with that. The way your code is in your question, the saveData function is set to run each time, even if it's not valid. So we can change that from happening.

Like A. Wolff said in the comments, you could just wrap an if statement around your call to saveData function.

So you could have your code look something like this

$("#personal_info").submit(function(event) { event.preventDefault(); if ($(this).valid()) { // if form is valid saveData("personal_info"); // then do this } }); function saveData(formName){ console.log("test"); }

The new HTML5 validation APIs will not submit an invalid form unless you use the novalidation attribute on the form. See developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/…

Collectives™ on Stack Overflow

Does submit get called if form is invalid?

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related