エラーメッセージが2秒間だけ点滅する

Question

javascript検証でサインアップフォームを作成しようとしていますが、エラーメッセージが1秒間だけ点滅します。

私は他の同様の質問を検索しようとしたが、私は答えを見つけることができませんでした...

この

は私のフォームコード

<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

validateFormがfalseを返すと、return validateForm()を使用してフォームを送信しなくなります。

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"です。これは必ずしもフォームを停止しません。

ページ全体がリロードされるため、1秒ごとにエラーメッセージが表示されます。

あなたの検証関数は、代わりに "onSubmit"イベントにバインドする必要があります。

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