即使返回 false，onsubmit 仍在提交表单？

Question

I have a form in HTML page.我在 HTML 页面中有一个表格。 It includes:这包括：

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

So even the ValidationEvent() returns false I can render the result.html .所以即使ValidationEvent()返回 false 我也可以渲染result.html 。 Below is the definition of the function:下面是function的定义：

// Below Function Executes On Form Submit

function validation() { function 验证（）{

// 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:我的 HTML 页面是：

    <!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.返回 false 不会阻止表单以任何一种方式提交。 You should also call preventDefault to prevent the default form action for Ajax form submissions.您还应该调用preventDefault来阻止 Ajax 表单提交的默认表单操作。

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. Event 接口的preventDefault()方法实际上告诉用户代理，如果事件没有得到显式处理，则不应像通常那样采取其默认操作。

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

即使返回 false，onsubmit 仍在提交表单？

问题描述

1 个解决方案

解决方案1
1 2021-12-05 21:11:35

即使返回 false，onsubmit 仍在提交表单？

问题描述

1 个解决方案

解决方案1 1 2021-12-05 21:11:35

解决方案1
1 2021-12-05 21:11:35