即使条件匹配，javascript 表单验证也始终返回 true 并且应该返回 false

debugcn 发表于 Dev

Citra45Abadi

我正在尝试根据Vikrant在 jsfiddle上的脚本进行 javascript 表单验证。

我已经作出了自己的剧本上的jsfiddle过这里它是非常相似，他的代码，但由于某些原因，警报从未触发器，提交表单，即使它不应该。

这也发生在我的本地主机上。

这里也是代码：

function FormValidasi() {
  if (document.getElementById('cabang').value == "tor") {
    alert("Mohon pilih cabang nya");
    return false;
  } else if (document.getElementById('tipe').value == "tor") {
    alert("Mohon pilih tipenya");
    return false;
  }
  return (true);
}

<form name="Formulir" method="post" action="2013.php" onsubmit="return FormValidasi();">
  <input type="text" name="cabang" id="cabang" placeholder="Input cabang">
  <br>
  <input type="text" name="tipe" id="tipe" placeholder="Input Tipe">
  <input type="submit" name="submit" value="submit">
</form>

因此，如果我"tor"在两个字段中输入，或者只在其中一个字段中输入，脚本应该是returning false并阻止表单提交？但是即使我输入了表格也会提交"tor"

代码猴子

代码不工作的原因是你在这里编码的那一行return (true);代码执行你的 JS 是检查IF条件并从那里只返回一个输出。从你总是return true意味着脚本执行 IF 语句的那一行开始，但最终return true即使你的输入字段也有错误。

function FormValidasi() {
  if (document.getElementById('cabang').value == "tor") {
    alert("Mohon pilih cabang nya");
    return false;
  } else if (document.getElementById('tipe').value == "tor") {
    alert("Mohon pilih tipenya");
    return false;
  }  
}

<form name="Formulir" method="post" action="2013.php" onsubmit="return FormValidasi();">
  <input type="text" name="cabang" id="cabang" placeholder="Input cabang">
  <br>
  <input type="text" name="tipe" id="tipe" placeholder="Input Tipe">
  <input type="submit" name="submit" value="submit">
</form>

更新 1

2 个用户提出了合理的论点，我已经更新了代码片段以避免出现如下错误。

未捕获的 ReferenceError：FormValidasi 未在 HTMLFormElement.onsubmit 中定义

这可以避免将表单提交验证功能作为全局功能。

window.FormValidasi = FormValidasi;

更新代码：

window.FormValidasi = FormValidasi;

function FormValidasi() {
  if (document.getElementById('cabang').value == "tor") {
    alert("Mohon pilih cabang nya");
    return false;
  } else if (document.getElementById('tipe').value == "tor") {
    alert("Mohon pilih tipenya");
    return false;
  }  
}

<form name="Formulir" method="post" action="2013.php" onsubmit="return FormValidasi();">
  <input type="text" name="cabang" id="cabang" placeholder="Input cabang">
  <br>
  <input type="text" name="tipe" id="tipe" placeholder="Input Tipe">
  <input type="submit" name="submit" value="submit">
</form>

阅读有关未定义 onsubmit 函数的函数错误的更多信息

更新 2

感谢再次查看代码。OP 具有正确定义的功能。由于问题是他的功能没有正确执行，完全是由于 js 事故造成的。可以通过创建函数来避免global。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。