无法让 JavaScript 表单验证工作

Question

我有我的 HTML 表单设置，其中链接了一个外部 JS 文件：

<script type="text/javascript" src ="../a1/js/formvalid.js"></script>

HTML & JS 如下：

 function validateForm() { // user inputs var firstname = document.getElementById("firstname").value; var surname = document.getElementById("lastname").value; var email = document.getElementById("email").value; if (firstname == "") { document.getElementById("firstnameError"). style.display = "inline"; return false; } else if (surname == "") { document.getElementById("lastnameError"). style.display = "inline"; return false; } }

 <div id="grid-container"> <h3>Enter your Details Below</h3> <form id="registration_form" action="" onsubmit="return validateForm()"> <:-- Name/Email Input --> <div><label for="firstname">First Name: </label><input type="text" name = "firstname" id="firstname"></div> <div class="error" id="firstnameError">Required: Please enter your first name</div><br> <div><label for="lastname">Last Name: </label><input type="text" name = "lastname" id="lastname"></div> <div class="error" id="lastnameError">Required: Please enter your Last name</div><br> <div><label for="email">Email: </label><input type="text" name = "email" id="email"></div> <div class="error" id="emailError">Required: Please enter your email</div> <input type="submit" value="Register"/> </form>

但是每当我提交时，JS 都不起作用，它只是提交表单。 我已经能够让它为其他 forms 工作，但它只是不想为这个工作。 有人知道我面临什么错误吗？ 我使用了一个 JS 语法验证器，它说没有错误。

Answer 1

当表单无效时，您需要阻止表单提交。 StackOverflow 上有很多关于这个的帖子。 这是一个： JavaScript 代码停止表单提交

这个概念是您从您的validateForm() function 返回false以防止提交。 此外，您应该防止触发默认事件。

function validateForm(event) {
  event.preventDefault();
  ...
}

Answer 2

您必须对 HTML 和 javascript 代码进行一些更改。
目前，我编写了一些不同的代码，我认为你喜欢这个东西。
在 HTML 代码中，您必须更改按钮单击事件。

<div id="grid-container">
  <h3>Enter your Details Below</h3>
  <form id="registration_form" action="">
    <div><label for="firstname">First Name: </label><input type="text" name = "firstname" id="firstname"></div>
    <div class="error" id="firstnameError">Required: Please enter your first name</div><br>
                    
    <div><label for="lastname">Last Name: </label><input type="text" name = "lastname" id="lastname"></div>
    <div class="error" id="lastnameError">Required: Please enter your Last name</div><br>
                    
    <div><label for="email">Email: </label><input type="text" name = "email" id="email"></div>
    <div class="error" id="emailError">Required: Please enter your email</div>
                    
    <input type="button" value="Register" onClick="validateForm()"/>
   </form>
</div>

听到你的 javascript 代码有一点点变化：

    document.getElementById("firstnameError"). style.display = "none";
    document.getElementById("lastnameError"). style.display = "none";
    document.getElementById("emailError"). style.display = "none";
    function validateForm() 
    {
      document.getElementById("firstnameError"). style.display = "none";
      document.getElementById("lastnameError"). style.display = "none";
      document.getElementById("emailError"). style.display = "none";
      var firstname = document.getElementById("firstname").value;
      var surname = document.getElementById("lastname").value;
      var email = document.getElementById("email").value;
      var flagValidate = true;
      if (firstname == "") 
      { 
        document.getElementById("firstnameError"). style.display = "block";
        document.getElementById("firstnameError"). style.color = "red";
        flagValidate = false;
      }
    
      if (surname == "") 
      {   
        document.getElementById("lastnameError"). style.display = "block";
        document.getElementById("lastnameError"). style.color = "red";
        flagValidate = false;
      }
    
      if(email == "")
      {
        document.getElementById("emailError"). style.display = "block";
        document.getElementById("emailError"). style.color = "red";
        flagValidate = false;
      }
    
      if(flagValidate)
      {
        document.getElementById("registration_form").submit();
      }
  }