Historically forms were submitted as soon as the user clicked the submit button. Today we do not want that. Why? We want to ensure that the data is correct prior to submission. This is called validation. So how do we prevent form submission?
The first thing we do is grab the form. I am using getElementById, but you can use any number of methods. We then need to listen for the form submission…
We are adding an event listener to the form. We are listening for when the end user clicks the submit button. When it is clicked, our arrow function runs. Inside the arrow function, we are running the preventDefault method on the event. This method does what is sounds like. It prevents the default behavior, which is submission.