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

Question

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

我也在jsfiddle上制作了自己的脚本here它与他的代码非常相似，但由于某种原因，警报永远不会触发，即使不应该提交表单，也会提交表单。

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

这也是代码:

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”，脚本应该返回 false 并阻止表单提交？但即使我输入 "tor"

表单也会提交

Answer 1

代码不起作用的原因是您在此处编码的行 return (true); JS 的代码执行是检查 IF 条件并从那里仅返回一个输出。从您始终返回 true 的行开始，意味着脚本执行 IF 语句，但最终返回 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 位用户提出了合理的论点，我已更新代码片段以避免出现如下错误。

Uncaught ReferenceError: FormValidasi is not defined at 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 function is not defined

更新2

感谢您考虑再次查看代码。 OP 已正确定义函数。因为问题是他的函数不能正确执行完全是由于 js 错误造成的。可以通过将函数设置为全局来避免这种情况。