How to stop form submission?

Question

I'm new to JavaScript. I need to prevent the form from submitting if any of the validation conditions returned false.

ex:-

if((document.getElementById("name").value)==""){
    alert("'Name' field can not be empty");
    return false;
}

I tried <form onsubmit="return validate();"> and <form onsubmit="event.preventDefault(); validate();">. None of those helped. First one prompt the same alert message twice. Second one continuously prompt all alert messages. What I want is,

If there is one false condition, I need the browser to stop the form from submitting and prompt the relevant alert message.
If there are more than one false conditions, I need the browser to stop the form from submitting and only prompt one alert message.

Is there any way to accomplish this by using JavaScript (No JavaScript libraries)?

Sorry if there are any grammar mistakes, English is not my first language :(

this might help You [link](https://stackoverflow.com/questions/3350247/how-to-prevent-form-from-being-submitted) — , Feb 12 '22 at 09:20

Coffee Muffin · Accepted Answer · 2022-02-12T09:35:25.307

You need to call preventDefault of the event object that comes as a parameter you get from the callback function of the EventListener. Like that:

...
<head>
<script>
window.addEventListener("load",init);
function init()
  {document.getElementById("form").addEventListener("submit",function(e)
     {e.preventDefault();});}
</script>
</head>
<body>
<form id="form">
  <input type="submit">
</form>
</body>
...

You can call that parameter anything, and you can also define that function somewhere else.

...
<script>
window.addEventListener("load",init);
function init()
  {document.getElementById("form").addEventListener("submit",handleSubmit);}
function handleSubmit(event)
  {event.preventDefault();}
</script>
...

How to stop form submission?

1 Answers1