JQuery addClassは非常に奇妙な方法で作業しています

Question

私は3つの入力：ユーザー名と電子メールの2つのテキスト入力と、それを推測するための第3のパスワード入力のフォームを持っています。

私はこれらの入力フィールドをJQueryで検証していますが、入力が空でも形式にも合わない場合は、赤い枠線で入力にクラスを追加します。

if ($("input#username").val().length < 6) { 
       $("input#username").addClass('input-error'); 
       next_step = false; 
      } else if (!isEmail($("#email").val())) { 
       $("#email").addClass('input-error'); 
       next_step = false; 
      } else if (!isPassword($("#pwd").val())) { 
       $("#pwd").addClass('input-error'); 
       next_step = false; 
      } 

      else { 

       $(this).removeClass('input-error'); 
       next_step = true; 
      } 

これは、ユーザー名とEメールフィールドの両方で完璧に動作、およびパスワードフィールドが空の場合にも動作しますが、それは完全に検証されていても、addClass（）はしていません。コードは次のようになりますパスワードが要件を満たしていない場合は動作します（少なくとも1つの大文字と1つの数字）。

あなたが見ることができるように、それは一種のクラスが追加されますが、その後は本当に：

これは、ブラウザのコンソールが表示するものです。 何が起こっていますか？ HTMLコードやCSSコードが必要な場合は教えてください！

ご協力いただきありがとうございます。

EDIT は、ここで要求されるようにHTMLとCSSです：

<fieldset> 
       <div class="form-bottom"> 
          <img src="img/gbsnlogo.svg" alt="GBSN Research" name="GBSN Research" width="50%" class="signupLogo" /> 
          <br> 
          <br> 
          <br> 
          <div class="form-group"> 
           <label for="username"><h1>USERNAME:</h1></label> 
           <input type="text" class="form-control" id="username" placeholder="Enter username..." name="username"> 
          </div> 

          <div class="form-group"> 
           <label for="email"><h1>E-MAIL:</h1></label> 
           <input type="text" class="form-control" id="email" placeholder="Enter e-mail..." name="email"> 
          </div> 
          <div class="form-group"> 
           <label for="pwd"><h1>PASSWORD:</h1></label> 
           <input type="password" class="form-control" id="pwd" placeholder="Enter password..." name="pwd"> 
          </div> 
          <div class="text-center"> 
           <button type="button" class="btn-next btn-nav"><h1>NEXT</h1></button> 
          </div> 
         </div> 
        </fieldset> 

とCSS：

.form-control { 
    height: 40px; 
    border: 2px solid black; 
    border-radius: 0; 
    font-size: 14px; 
} 

.form-control:focus { 
    border: 2px solid black; 
    box-shadow: 0; 
} 
.input-error { 
    border-color: #FF2859; 
} 

Answer 1

この私のために働いています。

この種類の設定を行ってもまだ動作しないものはどうかご意見ください。

function isEmail(email) { // dummy example 
 
    return email.indexOf("@")>1; 
 
} 
 
function isPassword(passwd) { // dummy example 
 
    return passwd.indexOf("x")>=0; // must contain x 
 
} 
 

 
$(function() { 
 
    $(".btn-next").on("click", function() { 
 
    $(".form-group input").removeClass('input-error'); 
 
    var next_step = true, 
 
    user = $("#username").val(), 
 
    email = $("#email").val(), 
 
    pwd=$("#pwd").val(); 
 
    if (user.length < 6) { 
 
     $("#username").addClass('input-error'); 
 
     next_step = false; 
 
    } else if (!isEmail(email)) { 
 
     $("#email").addClass('input-error'); 
 
     next_step = false; 
 
    } else if (!isPassword(pwd)) { 
 
     $("#pwd").addClass('input-error'); 
 
     next_step = false; 
 
    } 
 
    console.log(next_step); 
 
    }); 
 
});

.form-control { 
 
    height: 40px; 
 
    border: 2px solid black; 
 
    border-radius: 0; 
 
    font-size: 14px; 
 
} 
 

 
.form-control:focus { 
 
    border: 2px solid black; 
 
    box-shadow: 0; 
 
} 
 

 
.input-error { 
 
    border-color: #FF2859; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<fieldset> 
 
    <div class="form-bottom"> 
 
    <img src="img/gbsnlogo.svg" alt="GBSN Research" name="GBSN Research" width="50%" class="signupLogo" /> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <div class="form-group"> 
 
     <label for="username"><h1>USERNAME:</h1></label> 
 
     <input type="text" class="form-control" id="username" placeholder="Enter username..." name="username"> 
 
    </div> 
 

 
    <div class="form-group"> 
 
     <label for="email"><h1>E-MAIL:</h1></label> 
 
     <input type="text" class="form-control" id="email" placeholder="Enter e-mail..." name="email"> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="pwd"><h1>PASSWORD:</h1></label> 
 
     <input type="text" class="form-control" id="pwd" placeholder="Enter password..." name="pwd"> 
 
    </div> 
 
    <div class="text-center"> 
 
     <button type="button" class="btn-next btn-nav"><h1>NEXT</h1></button> 
 
    </div> 
 
    </div> 
 
</fieldset>

Answer 2

私はあなたが私はこれだけは何が起こったかであると推測することができます

投稿画像から見たものから。 [input#pwd.form-control.input-error]という行は、コンソールに印刷された直後に評価されました。だから、その時点では、DOMはクラスinput errorを持っています。しかし、それを展開すると、DOMが再び評価されました。その時、domのクラスinput-errorが削除されたので、もう表示されません。私は、その順序で$('#pwd').addClass('input-error')と$('#pwd').removeClass('input-error')を実行して、その上で

下の画像をこれを証明することができた、私はあなたがクラスを追加した直後にクラスを削除するコード内の別のロジックを持っている疑いがありますdomに、おそらく$(this).removeClass('input-error');。