onsubmit is still submitting the form even if it returns false?

Question

I have a form in HTML page. It includes:

<form action="result.html" method="get" onsubmit="return validation()">

So even the ValidationEvent() returns false I can render the result.html . Below is the definition of the function:

// Below Function Executes On Form Submit

function validation() {

// Storing Field Values In Variables
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var contact = document.getElementById("contact").value;
// Regular Expression For Email
var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;

// Conditions
if (name != '' && email != '' && contact != '') {
    if (emailReg.test(email)==true) {
        //  if (email.match(emailReg)) 
        if (document.getElementById("male").checked || document.getElementById("female").checked) {
            if (contact.length == 10) {
                alert("All type of validation has done on OnSubmit event.");
                console.log("All type of validation has done on OnSubmit event.")
                return true;
            } 
            else {
                alert("The Contact No. must be at least 10 digit long!");
                console.log("The Contact No. must be at least 10 digit long!");
                return false;
            }
        } 
        else {
            alert("You must select gender.....!");
            return false;
        }
    } 
    else {
        alert("Invalid Email Address...!!!");
        return false;
    }
} 
else {
    alert("All fields are required.....!");
    return false;
}

}

my HTML page is:

    <!DOCTYPE html>
<html>
<head>
<title>Javascript Onsubmit Event Example</title>
<link href="style.css" rel="stylesheet"> <!-- Include CSS File Here-->
<script src="js/event.js"></script>
</head>
<body>
<div class="container">
<div class="main">
<form action="result.html" method="get" onsubmit="return validation(e);">
<h2>Javascript Onsubmit Event Example</h2>
<label>Name :</label>
<input id="name" name="name" placeholder="Name" type="text">
<label>Email :</label>
<input id="email" name="email" placeholder="Valid Email" type="text">
<label>Gender :</label>
<input id="male" name="gender" type="radio" value="Male">
<label>Male</label>
<input id="female" name="gender" type="radio" value="Female">
<label>Female</label>
<label>Contact No. :</label>
<input id="contact" name="contact" placeholder="Contact No." type="text">
<input type="submit" value="Submit">
<span>All type of validation will execute on OnSubmit Event.</span>
</form>
</div>
</div>`


</body>

</html>

How can prevent the form to be submitted.

Answer 1

Returning false will not prevent the form to be submitted either way. You should also call preventDefault to prevent the default form action for Ajax form submissions.

e.preventDefault();

The preventDefault() method of the Event interface actually tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be taken.

More about preventDefault() - https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

onsubmit is still submitting the form even if it returns false?

Question

1 answers

solution1
1 2021-12-05 21:11:35

onsubmit is still submitting the form even if it returns false?

Question

1 answers

solution1 1 2021-12-05 21:11:35

solution1
1 2021-12-05 21:11:35