How to stop form submission?

February 12, 2022

I’m new to JavaScript. I need to prevent the form from submitting if any of the if conditions returned 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 🙁

<input type="submit" value="Submit" onClick="validate();">

function validate(){
    var a=document.getElementById("name").value;
    var b=document.getElementById("address").value;
    var c=document.getElementById("email").value;
    var d=document.getElementById("telephone").value;
    var e=document.getElementById("select").value;
    var f=document.getElementById("check1").checked;
    var g=document.getElementById("check2").checked;
    var h=document.getElementById("check3").checked;
    var i=document.getElementById("check4").checked;
    var j=document.getElementById("check5").checked;
    var k=document.getElementById("check6").checked;
    var l=document.getElementById("check7").checked;
    var m=document.getElementById("check8").checked;
    var n=document.getElementById("check9").checked;
    var o=document.getElementById("check10").checked;
    var p=document.getElementById("check11").checked;
    var q=document.getElementById("check12").checked;
    var r=document.getElementById("radio.yes").checked;
    var s=document.getElementById("radio.no").checked;
    
    if(a==""){
        alert("'Name' field can not be empty");
        return false;
    }
    if(b==""){
        alert("'Address' field can not be empty");
        return false;
    }
    if(c==""){
        alert("'Email' field can not be empty");
        return false;
    }
    if(d==""){
        alert("'Telephone' field can not be empty");
        return false;
    }
    if(e==0){
        alert("A 'Branch' must be selected");
        return false;
    }
    if(f==false && g==false && h==false && i==false && j==false && k==false && l==false && m==false && n==false && o==false && p==false && q==false){
        alert("Please select at least one item");
        return false;
    }
    if(r==false && s==false){
        alert("You should state whether you are a Gaming Store Member or not");
        return false;
    }
}

>Solution :

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>
...