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,
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 :(
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>
...