如果 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

当您的 input 为空时，Web 浏览器会因为 required 属性而阻止表单提交。如果您删除它，事情应该会按照您的预期进行。我鼓励您使用 required 属性和 HTML 表单验证。比自己写简单多了。

Answer 2

您的问题很可能是代码在

处停止执行

var x = document.forms["myForm"][yname][yemail][ymessage].value

这是因为 yname、yemail 和 ymessage 是未声明的变量。

您可以使用此表示法访问对象，但发送到 [] 运算符的键必须是有效字符串。

我想你可能想要做的是

var name = document.forms["myForm"]["yname"].value
var email = document.forms["myForm"]["yemail"].value
var message = document.forms["myForm"]["ymessage"].value

还有一件事，您表单上的输入应该有一个 id="yname"、id="yemail" 等等。

示例：

<input type="email" name="yemail" class="contact-form-text" placeholder="Your Email" required id="yemail">

编辑：使用名称属性是有效的，但正如我上面所说，代码在第一次使用 yname 时停止执行，这是因为该变量不存在。

Answer 3

您没有正确访问该值。请看下面我的回答：

document.querySelector('form[name="myForm"]').onsubmit = ev => {
  let yName = document.querySelector('input[name="yname"]').value;
  if (yName) {
    alert("Your message has been sent.");
  } else {
    ev.preventDefault();
    alert("Please complete form.");
  }
};

<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" value="Send">
</form>

Answer 4

你真的应该使用 onSubmit 处理程序

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

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

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

如果你还想用javascript:

您编写的代码无法按预期工作，因为您的 space 上没有名为 yname 的变量。如果你真的想通过 javascript 进行检查，你可以这样做：

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

如果 Else 语句没有被执行

If Else Statement is not being executed

html

javascript

if-statement

function

contact-form