javascript - If Else 语句没有被执行

Question

我有一份联系表单，其中包含必填字段。我编写了一个 If else 语句，以便如果必填字段为空，则不会发送表单，如果为空，则发送并清除表单。语句的 If 部分正在执行，但 else 似乎没有执行。我仍在学习 Javascript，所以我可能做错了一些事情。

我尝试查看 If else 语句的布局并修改我的语句，但这没有帮助。

<form name="myForm" class="contact-form" 
action="mailto:someone@example.com" method="post" enctype="text/plain">
    <input type="text" name="yname" class="contact-form-text" 
placeholder="Your Name" required>
    <input type="email" name="yemail" class="contact-form-text" 
placeholder="Your Email" required>
    <textarea class="contact-form-text" name="ymessage" placeholder="Your 
Message" required></textarea>
    <input type="reset" class="contact-form-btn-reset" value="Reset">
    <input type="submit" class="contact-form-btn" onClick="return 
submitForm()" value="Send">

    <script>
      function submitForm() {
        var x = document.forms["myForm"][yname][yemail][ymessage].value;
        if (x == "") {
          alert("Please complete form.");
          return false;
        } else {
          alert("Your message has been sent.");
          var frm = document.getElementsByName('myForm')[0];
          frm.submit();
          frm.reset();
          return false;
        }
      }
    </script>
  </form>

当按下提交按钮时，我希望表单提交时带有警报并清除(如果所有字段都已完成)，如果所有字段未完成，我希望表单不会提交。

Answer 1

您确实应该使用 onSubmit 处理程序

正如人们已经在评论中指出的那样，已经有一种内置方法可以在提交表单之前验证是否填写了所有必填字段，这使用起来相当优雅。为此，您所需要做的就是使用 onSubmit 处理程序而不是 onClick:

<input type="submit" class="contact-form-btn" onClick="return submitForm()" value="Send">

这样，您就不需要编写任何代码来验证用户是否正确填写了所有字段。

如果您仍想使用 JavaScript:

您编写的代码无法按预期工作，因为您的空间上没有名为 yname 的 var。如果您确实想通过 javascript 进行此检查，您可以执行以下操作:

var myForm = document.forms["myForm"];
if (!myForm["yname"].value || myForm["email"].value || myForm["ymessage"].value) {
  alert("Please complete form.");
  return false;
}