錯誤消息僅閃爍一秒

Question

我正在嘗試使用JavaScript驗證進行註冊，但錯誤消息僅閃爍一秒。

我試圖尋找其他類似的問題，但我無法找到答案......

這是我的表單代碼

<form method="post" name="signupForm"> 
    <div id="signup-form" class="col-md-12 col-sm-12 col-xs-12"> 
     <span id="error"></span> 
     <div class="form-group" id="inputFirst"> 
      <label for="firstname">First Name:</label> 
      <input class="form-control" type="text" name="first_name" id="firstname" placeholder="John" value=""> 
     </div> 

     <div class="form-group" id="inputLast"> 
      <label for="lastname">Last Name:</label> 
      <input class="form-control" type="text" name="last_name" id="lastname" placeholder="Doe" value=""> 
     </div> 

     <div class="form-group" id="inputEmail"> 
      <label for="signup_email">Email Address:</label> 
      <input class="form-control" type="email" id="signup_email" name="email" placeholder="example@gmail.com" value=""> 
     </div> 

     <div class="form-group" id="inputPassword"> 
      <label for="user_password">Password:</label> 
      <input class="form-control" type="password" id="user_password" name="password" placeholder="Create a Password"> 
     </div> 
     <button type="submit" onclick="validateForm()" class="btn button">Sign Up</button> 

    </div> 
</form> 

這是我的驗證功能

function validateForm() { 
     var first= document.forms["signupForm"]["firstname"].value; 
     var last = document.forms["signupForm"]["lastname"].value; 
     var email= document.forms["signupForm"]["email"].value; 
     var pass = document.forms["signupForm"]["password"].value; 
     var msg = ""; 
     var valid= true; 

     checkname = /[A-z]/; 
     checkemail= /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/; 

     if(!/\w/.test(pass)) 
     { 
      msg="Password can only contain [a-z, A-Z, 0-9, _ (underscore)]"; 
      valid= false; 
     } 
     if(!checkemail.test(email)) 
     { 
      msg="Email address Invalid"; 
      valid= false; 
     } 
     if(!checkname.test(first)) 
     { 
      msg="First and Last Name can only contain alphabets"; 
      valid= false; 
     } 
     if(first==="" && last==="" && email==="" && pass==="") 
     { 
      msg="Please fill every field given below"; 
      valid= false; 
     } 
     document.getElementById("error").innerHTML = msg; 
     return valid; 

    } 

Answer 1

你應該使用return validateForm()，這樣當validateForm返回false時 - 它會停止提交表單。

function validateForm() { 
 
    var first= document.forms["signupForm"]["firstname"].value; 
 
    var last = document.forms["signupForm"]["lastname"].value; 
 
    var email= document.forms["signupForm"]["email"].value; 
 
    var pass = document.forms["signupForm"]["password"].value; 
 
    var msg = ""; 
 
    var valid= true; 
 
debugger; 
 
    checkname = /[A-z]/; 
 
    checkemail= /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/; 
 

 
    if(!/\w/.test(pass)) 
 
    { 
 
    msg="Password can only contain [a-z, A-Z, 0-9, _ (underscore)]"; 
 
    valid= false; 
 
    } 
 
    if(!checkemail.test(email)) 
 
    { 
 
    msg="Email address Invalid"; 
 
    valid= false; 
 
    } 
 
    if(!checkname.test(first)) 
 
    { 
 
    msg="First and Last Name can only contain alphabets"; 
 
    valid= false; 
 
    } 
 
    if(first==="" && last==="" && email==="" && pass==="") 
 
    { 
 
    msg="Please fill every field given below"; 
 
    valid= false; 
 
    } 
 
    document.getElementById("error").innerHTML = msg; 
 
    return valid; 
 

 
}

<form method="post" name="signupForm"> 
 
    <div id="signup-form" class="col-md-12 col-sm-12 col-xs-12"> 
 
     <span id="error"></span> 
 
     <div class="form-group" id="inputFirst"> 
 
      <label for="firstname">First Name:</label> 
 
      <input class="form-control" type="text" name="first_name" id="firstname" placeholder="John" value=""> 
 
     </div> 
 

 
     <div class="form-group" id="inputLast"> 
 
      <label for="lastname">Last Name:</label> 
 
      <input class="form-control" type="text" name="last_name" id="lastname" placeholder="Doe" value=""> 
 
     </div> 
 

 
     <div class="form-group" id="inputEmail"> 
 
      <label for="signup_email">Email Address:</label> 
 
      <input class="form-control" type="email" id="signup_email" name="email" placeholder="example@gmail.com" value=""> 
 
     </div> 
 

 
     <div class="form-group" id="inputPassword"> 
 
      <label for="user_password">Password:</label> 
 
      <input class="form-control" type="password" id="user_password" name="password" placeholder="Create a Password"> 
 
     </div> 
 
     <button type="submit" onclick="return validateForm()" class="btn button">Sign Up</button> 
 

 
    </div> 
 
</form>

Answer 2

你的方式可能仍然可以提交你不停止提交表單。您的事件處理程序在提交按鈕上是「onClick」。這不一定會阻止表單。

由於頁面執行了整頁重新加載，因此您只能看到錯誤消息。

您的驗證函數應該綁定到「onSubmit」事件。

<form onsubmit="return validateForm();">