0

I know a way to stop a form from submitting, but i have a on click event to the submit button and its firing even though the form doesnt pass the HTML validation.

<form id="signupform" class="signupform" onsubmit="(e)=>{e.preventDefault()};return false">

</form>

My goal is to stop the page refresh either way (if it validates or not) but still allow the built in validation to run first.

Any suggestions?

Lewis Morris
  • 1,916
  • 2
  • 28
  • 39

1 Answers1

0

A submit button's job is to trigger the submit event of a form. Therefore, with form elements, you don't set up click events on the submit button, you set up submit event handlers on the form.

Then, to introduce validation into the mix, you can stop the native submit to take place in the handler, only if validation fails. This is done by accessing the event argument that is automatically sent to every DOM event handler* (see next paragraph for caveat). You can use the event.preventDefault() method to stop the native event from taking place.

*One final note, the use of inline HTML event handling attributes such as onsubmit and onclick is to be avoided. This is a 25+ year old technique that we used before we had standards and unfortunately, because they seem easy to use, they get copied by new developers who don't know any better. There are real reasons not to use them and you've stumbled into one. Your e argument to your event handling function is not being populated with a reference to the event like you think it is. That only happens when you use the modern standard way of setting up event callbacks, which is .addEventListener().

// Set up a submit event handler for the form
// not a click event handler for the button because
// clicking a submit button triggers the form's submit event
document.querySelector("form").addEventListener("submit", function(event){
  if(document.querySelector("input").value === ""){
    // Invalid data! Stop the submit!
    event.preventDefault();
    alert("Please fill in all fields!");
    return;
  }

  // If the code reaches this point, validation succeeded
  console.log("Form submitted");
});
<form action="https://example.com" method="post">
  <input>
  <button>Submit</button>

</form>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • The other part of the question is why the listener the OP has on the form doesn't stop submission. Running validation from a button might be OK if, for example, different buttons run different validation. – RobG Feb 25 '21 at 22:24
  • @RobG I've addressed that in the last paragraph before the example. – Scott Marcus Feb 25 '21 at 22:25
  • I use addEventListner when I can, but as you seem to be in the know. Why is it back practise to use the onclick event? Then if I am adding events to elements such as this, do I do this when the window load event fires. And then is it ok to do this in script tags on the page, or should i define them in my .js file? I assume these is where i need to learn modules? – Lewis Morris Feb 25 '21 at 22:50
  • Then lastly if I am adding event listeners in my .js file. How should I approach running selected code for certain pages. Thinking like this I assume its ok to have script tags to fire the functions to add listeners etc. @ScottMarcus – Lewis Morris Feb 25 '21 at 22:53