Question

我对编程非常缺乏经验，如果这是一个愚蠢的问题，那就很抱歉。

我正在创建一个用户可以使用按钮提交的表单。我已经使用脚本函数来决定它们是返回true还是false，唯一的条件是必须填充输入框。这是我的JavaScript和HTML代码的简化版本，我只包含一个输入框。（我的真实代码有六个）

＆＃13;

function validateEmail() {
    var x = document.forms["myForm"]["email"].value;
    if (x == null || x == "") {
        alert("Email must be filled out");
        return false;
	}
	else {
		return true;
	}
}

＆＃13;

<form name="myForm" 
onsubmit="validateEmail()" method="post" action="Different_Page.html">
  
<label for="email">Email Address:</label>
<input type="email" name="email">
  
<input type="submit" value="Submit">
</form>

＆＃13;

问题是如果用户没有输入他们的电子邮件并且该函数返回false，它仍然会转到我只希望它返回true时返回的页面。换句话说，我希望它不做任何事情并保持在此页面上，但仅当脚本返回false时。我该如何做到这一点？

Answer 1

您必须return false函数onsubmit，而不仅仅是该函数调用的函数。

onsubmit="return validateEmail()"

也就是说，现代代码会避免使用内部事件属性来支持使用JavaScript绑定事件处理程序...

function validateEmail(evt) {
  var x = this.elements.email.value;
  if (x == "") {
    alert("Email must be filled out");
    evt.preventDefault();
  }
}

document.getElementById('myForm').addEventListener("submit", validateEmail);

<form id="myForm" method="post" action="Different_Page.html">

  <label for="email">Email Address:</label>
  <input type="email" name="email">

  <input type="submit" value="Submit">
</form>

...或完全忘记JavaScript，只使用HTML 5中引入的验证功能。

<form method="post" action="Different_Page.html">

  <label for="email">Email Address:</label>
  <input type="email" name="email" required>

  <input type="submit" value="Submit">
</form>

如果我的JavaScript函数返回false，如何阻止表单操作？

1 个答案: