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的变量。如果您真的想通过javascript进行此检查，则可以执行以下操作：

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

Answer 2

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

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 3

当input为空白时，由于required属性，Web浏览器将阻止提交表单。如果将其删除，那么事情应该会按预期进行。我鼓励您使用required属性和HTML表单验证。自己编写要简单得多。

Answer 4

您的问题很可能是代码在

处停止执行

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时停止执行，这是因为该变量不存在。

如果未执行其他语句

4 个答案: