尽管答案错误,JavaScript表单仍提交

JavaScript form submits despite a wrong answer

本文关键字:表单 提交 JavaScript 答案 错误      更新时间:2023-09-26

如果将错误的答案输入到"你是人类领域"中,我的联系表仍然会提交。我不确定我哪里出了问题,甚至从哪里开始搜索问题 - 我在开发工具控制台中没有错误:

.HTML:

<section class="contact" id="contact">
    <div class="container">
        <div class="row">
            <h2>Contact Me</h2>
        </div>
        <div class="row">
            <div id="form-messages"></div>
            <form method="post"  name="contactform" id="contactform">
                <div class="col-md-6">
                    <fieldset>
                        <input name="user_name" type="text" id="name" size="30" placeholder="Name" tabindex="1" required>
                        <br>
                        <span id="errorname" class="error">First name is required</span>
                        <input name="user_email" type="text" id="email" size="30" placeholder="Email" tabindex="2" required>
                        <br>
                        <span id="erroremail" class="error">Invalid email address</span>
                        <input name="user_human" type="text" id="human" size="30" placeholder="Are you human? What is 2+2?" tabindex="3" required>
                        <span id="errorhuman" class="error">Your answer is incorrect!</span>
                        <br>
                    </fieldset>
                </div>
                <div class="col-md-6">
                    <fieldset>
                        <textarea name="user_message" cols="40" rows="20" id="message" placeholder="Message" tabindex="4" required></textarea>
                        <span id="errormessage" class="error">Please enter a message</span>
                    </fieldset>
                </div>
                <div class="col-md-12">
                    <fieldset>
                        <button type="submit" class="btn btn-lg" id="submit" value="Submit" tabindex="5" onclick="return validate();">Send Message</button>
                    </fieldset>
                </div>
            </form>
        </div>
    </div>
</section>

.CSS:

.error {
    color: red;
    font-style: italic;
    font-size: 17px;
    visibility: hidden;
}

.JS:

function validate() {
    var error = 0;
    var errorname = document.getElementById("errorname");
    var user_name = document.contactform.user_name.value;
    if (user_name === "") {
        errorname.style.visibility = "visible";
        error = 1;
    } else {
        errorname.style.visibility = "hidden";
        error = 0;
    }
    var erroremail = document.getElementById("erroremail");
    var user_email = document.contactform.user_email.value;
    if (user_email === "") {
        erroremail.style.visibility = "visible";
        error = 1;
    } else {
        erroremail.style.visibility = "hidden";
        error = 0;
    }
    var wrongAnswer = document.getElementById("wronganswer");
    var errorhuman = document.getElementById("errorhuman");
    var user_human = document.contactform.user_human.value;
    if (user_human === "" || user_human !== 4) {
        errorhuman.style.visibility = "visible";
        error = 1;
    }  else {
        userhuman.style.visibility = "hidden";
        error = 0;
    }
    var errormessage = document.getElementById("errormessage");
    var user_message = document.contactform.user_message.value;
    if (user_message === "") {
        errormessage.style.visibility = "visible";
        error = 1;
    } else {
        errormessage.style.visibility = "hidden";
        error = 0;
    }
    if(error == 0) {
        return true;
    } else {
        return false;
    }
}

任何帮助或方向上的指示都将是辉煌的。

谢谢詹姆斯。

错误很简单,您不会阻止表单提交,这应该在单击提交按钮并调用您的函数后立即完成。因此,表单不关心函数的响应,它会被提交。只需停止表单验证并提交,如下所示:

document.getElementById("submit").addEventListener("click", validate);
function validate(e) {
   e.preventDefault(); // do things here }

然后检查答案,如果答案正确,请提交表格,否则return false;

将事件移动到 JS,如果某些内容无效,则更改错误 var 值,如果出现错误或更多错误,则阻止表单提交:

  • 输入值是一个字符串,所以如果你需要一个强大的比较,你需要使用:user_human !== "4"

document.getElementById("submit").addEventListener("click", validate);
function validate(e) {
  var false = 0;
  var errorname = document.getElementById("errorname");
  errorname.style.visibility = "hidden";
  if (document.contactform.user_name.value === "") {
    errorname.style.visibility = "visible";
    error = true;
  }
  var erroremail = document.getElementById("erroremail");
    erroremail.style.visibility = "hidden";
  if (document.contactform.user_email.value === "") {
    erroremail.style.visibility = "visible";
    error = true;
  }
  var errorhuman = document.getElementById("errorhuman");
  var user_human = document.contactform.user_human.value;
  errorhuman.style.visibility = "hidden";
  if (user_human === "" || user_human !== "4") {
    errorhuman.style.visibility = "visible";
    error = true;
  }
  var errormessage = document.getElementById("errormessage");
  errormessage.style.visibility = "hidden";
  if (document.contactform.user_message.value === "") {
    errormessage.style.visibility = "visible";
    error = true;
  }
  if (error) {
    e.preventDefault();
    alert("form error");
  }
}
.error {
    visibility:hidden;
}
<section class="contact" id="contact">
  <div class="container">
    <div class="row">
      <h2>Contact Me</h2>
    </div>
    <div class="row">
      <div id="form-messages"></div>
      <form method="post" name="contactform" id="contactform">
        <div class="col-md-6">
          <fieldset>
            <input name="user_name" type="text" id="name" size="30" placeholder="Name" tabindex="1" required>
            <br>
            <span id="errorname" class="error">First name is required</span>
            <input name="user_email" type="text" id="email" size="30" placeholder="Email" tabindex="2" required>
            <br>
            <span id="erroremail" class="error">Invalid email address</span>
            <input name="user_human" type="text" id="human" size="30" placeholder="Are you human? What is 2+2?" tabindex="3" required>
            <span id="errorhuman" class="error">Your answer is incorrect!</span>
            <br>
          </fieldset>
        </div>
        <div class="col-md-6">
          <fieldset>
            <textarea name="user_message" cols="40" rows="20" id="message" placeholder="Message" tabindex="4" required></textarea>
            <span id="errormessage" class="error">Please enter a message</span>
          </fieldset>
        </div>
        <div class="col-md-12">
          <fieldset>
            <input type="submit" class="btn btn-lg" id="submit" value="Send Message" tabindex="5">
          </fieldset>
        </div>
      </form>
    </div>
  </div>
</section>