無法讓 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();
      }
  }