输入无效时如何不提交表单。答案

【问题标题】：How to not submit a form when input is not valid.输入无效时如何不提交表单。
【发布时间】：2013-03-30 18:54:01
【问题描述】：

我试图阻止表单在“名称”字段未填写时提交，但它继续提交，即使 submitForm 函数返回 false。当用户输入名称失败时，submitForm 函数将 Name 字段变为黄色（当我在浏览器上按回时可以看到），但警报永远不会出现，并且表单仍然提交。有什么想法吗？

function submitForm() {
var valid = true;
var rform = document.forms[0];

if (testLength(rform.name)==false) valid=false;


if ((rform.member[0].checked || rform.member[1].checked)== false) {
  rform.member[0].style.backgroundColor="yellow";
  rform.member[1].style.backgroundColor="yellow";
  valid=false;
}

if (valid == false) alert("Enter all required information in the appropriate format");

return valid;
}

还有形式。

<form id="reg" method="GET" action="processorder.php">
<input id="btnSubmit" type="submit" value="Submit Form" onclick="return submitForm();"/></p>

【问题讨论】：

您的控制台是否出现任何错误？
您是否尝试过将验证放在表单的 onsubmit 事件而不是提交按钮上？
正确地使用onsubmit 属性。此外，通常最好将有效性默认为false，并且仅在达到某个点时才使其为真。
如果您使用的是 chrome，您可能需要在开发工具设置中启用“导航时保留日志”才能看到错误。
我没有收到任何错误。我只是尝试将验证放在表单 onsubmit 事件上，但没有成功。 @vol7ron，我会记住这一点。我正在使用火狐。

标签： javascript html

【解决方案1】：

尝试使用表单元素的 onsubmit 事件：

<form id="reg" method="GET" onsubmit="return submitForm();" action="processorder.php">
    <input id="btnSubmit" type="submit" value="Submit Form"/></p>
</form>

【讨论】：

是的。说真的，我不知道为什么这不起作用。它总是告诉我 submitForm 是未定义的。但是当我将它附加到窗口对象时它可以工作：jsfiddle.net/k7uSj
哦，你也可以使用 jQuerys submit 事件，它比内联 javascript 好得多，而且往往适用于所有浏览器。
感谢您的建议。 “将其附加到窗口对象”是什么意思？我对 html/javascript 不是很熟悉。
我的意思是通过编写window.submitForm = function () {...} 将函数添加为窗口对象的属性（看看我上面的示例）。但是，这是默认范围，因此在任何函数之外仅写入 function submitForm() {...} 也会将 submitForm 添加到窗口对象。