Trigger html form submit as if you clicked on button (but without a button)?

Question

If you have a <form> and a <button type='submit'> and you click on the submit button, it will do the default form validation, such as checking whether an <input> is required or not. It would normally say Please fill out this field.

However, if I programmatically submit the form through $("form").submit() for example, it would submit it without performing any checks.

Is there a simpler way to perform the default form validations using native JavaScript? There seems to be only checkValidity() on the form element which return true or false. And if I call the same native function on the input itself, it doesn't really do anything.

Here is a demo code of what I mean: http://jsfiddle.net/totszwai/yb7arnda/

Lincoln Pires · Accepted Answer · 2021-01-15 08:44:36Z

2

For those still struggling:

You can use the Constraint validation API - https://developer.mozilla.org/en-US/docs/Web/API/Constraint_validation

<div id="app">
  <form>
    <input type="text" required placeholder="name">
    <input type="text" required placeholder="email">
  </form>
  <button id="save">Submit</button>
</div>

const form = document.querySelector("form");
document.getElementById("save").addEventListener("click", e => {
  e.preventDefault();
  if (form.checkValidity()) {
    console.log("submit ...");
  } else {
    form.reportValidity();
  }
});

Check out and play here: https://stackblitz.com/edit/js-t1vhdn?file=index.js

I hope it helps or gives you ideas. :)

answered Jan 15, 2021 at 8:44

Lincoln Pires

3684 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

codenamezero Over a year ago

LOL 5 years later. XD But yeah, I guess hooking up on an event listener on the click would work.

Lincoln Pires Over a year ago

:D LOL - yeah - I'm a turtle. Anyway, I used the button and a click event, but the code could be used in literally any event - what you need would be the form reference so you can check and report ;)

Vikash · Accepted Answer · 2015-06-17 20:30:02Z

0

I think this might be the answer you are looking for :

JavaScript :

document
.getElementById('button')
.addEventListener("click",function(e) {
     document.getElementById('myForm').validate();
});

HTML :

<form  id="myForm" >
First name: <input type="text" name="FirstName"  required><br>
Last name: <input type="text" name="LastName" required><br>
<button id="button">Trigger Form Submit</button>
</form>

Demo : http://jsfiddle.net/2ahLcd4d/2/

edited Jun 17, 2015 at 20:30

answered Jun 16, 2015 at 17:57

Vikash

1,1391 gold badge12 silver badges19 bronze badges

9 Comments

Tech Savant Over a year ago

OP did not ask for jQuery.

Vikash Over a year ago

@NotoriousPet0 Changed to JavaScript from jQuery.

codenamezero Over a year ago

What if i don't have a button in my form? (which is the reason I ask the question) Are you saying that we can't trigger the behavior performed by the button separately?

Vikash Over a year ago

@codenamezero whenever you want to submit the form, just execute this document.getElementById('#myForm').validate();

codenamezero Over a year ago

Yeah, but I always get TypeError: $(…).validate is not a function. I've already search and tried a couple of potential solutions before I ask the question on stackoverflow. It seems that native function only has checkValidity from the form element and nothing else. And I think validate is a jQuery plugin.

|

Collectives™ on Stack Overflow

Trigger html form submit as if you clicked on button (but without a button)?

2 Answers 2

2 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related