変数（ブール値）が変更されたときにのみjavascript/jquery関数を呼び出す

Question

現在、プロジェクトには、ユーザー名入力に3文字以上、パスワード入力に6文字以上入力したかどうかを確認するログインフォームが含まれています。

ユーザ名に3文字以上の文字が含まれていると、変数がtrue（デフォルトはfalse）に設定されます。パスワードは同じです。両方が真であるときだけ、ログインボタンが利用可能になるはずです。それを無効にするかどうかは問題ではない、私は色を変更したい。両方が偽であるか、またはいずれかが真であれば、それは黒色のrgba値を取得し、両方が真であれば緑色のrgba色を取得します。

コードは、変更するたびに入力フィールドをチェックします。このため、cssを複数回変更する機能を実行します。これはcssをスパムし、コードの目的が失敗するようにします。

私のアイデアがありません（エネルギーは2:08 AMです）。私の問題の解決策があるかどうかを知りたいだけでした。

私のコードは下にあります。

var sheet = document.styleSheets[0]; 
var un = document.getElementById('un'); 
var pw = document.getElementById('pw'); 
var unCheck = false; 
var pwCheck = false; 
var bCheck = false; 

$('#un').bind('input', function() { 
una = un.value; 
if (/^\s*$/.test(una)){ 
    //input is empty or contains white space 
} 
else{ 

    //input contains character 
    if(una.length >= 3) 
    { 
     //input contains 3 characters or more 
     unCheck = true; 
    } 
    else 
    { 
     unCheck = false; 
    } 
     checkUnPw(); 
} 
}) 

$('#pw').bind('input', function() { 
    pwo = pw.value; 
    if (/^\s*$/.test(pwo)){ 
    //input is empty or contains white space 
} 
else{ 
//input contains character 

    if(pwo.length >= 6) 
    { 
     //input contains 6 characters or more 
     pwCheck = true; 
    } 
    else 
    { 
     pwCheck = false; 
    } 
     checkUnPw(); 
} 
}) 

function checkUnPw() { 
if(unCheck == true && pwCheck == true) 
{ 
    sheet.insertRule(".box button { background: rgba(46,204,113,1)!important;  }", 1); 
    document.getElementById("loginButton").disabled = false; 
} 
else 
{ 
    sheet.insertRule(".box button { background: rgba(0,0,0,0.05)!important;  }", 1); 
    document.getElementById("loginButton").disabled = true; 
}    
} 

Answer 1

これを実現するには、jQueryを使用できます。 私はかなりそれを作るためにブートストラップを使用しました。

JSコード：

$(document).ready(function(){ 
    validate(); 
    $('#un, #pw').keyup(validate); 
}); 

function validate(){ 
    if ($('#un').val().length >= 3 && 
     $('#pw').val().length >= 6) { 
     $("#loginButton").prop("disabled", false); 
     $("#loginButton").css("background", "rgba(46,204,113,1)"); 

    } 
    else { 
     $("#loginButton").prop("disabled", true); 
     $("#loginButton").css("background", "rgba(0,0,0,0.05)"); 

    } 
} 

私は、ユーザー名（最小3文字）とパスワード（最小6文字）をチェックするために、 "からkeyup" イベントを使用

検証関数であります基本条件がチェックされます。

HTMLコード：

<div class="container"> 

     <form class="form-signin"> 
     <h2 class="form-signin-heading">Please sign in</h2> 
     <label for="un" class="sr-only">User Name</label> 
     <input type="email" id="un" class="form-control" placeholder="User Name" required autofocus> 
     <label for="pw" class="sr-only">Password</label> 
     <input type="password" id="pw" class="form-control" placeholder="Password" required> 
     <div class="checkbox"> 
      <label> 
      <input type="checkbox" value="remember-me"> Remember me 
      </label> 
     </div> 
     <button id="loginButton" class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> 
     </form> 

    </div> 

CSSコード：

body { 
    padding-top: 40px; 
    padding-bottom: 40px; 
    background-color: #eee; 
} 

.form-signin { 
    max-width: 330px; 
    padding: 15px; 
    margin: 0 auto; 
} 
.form-signin .form-signin-heading, 
.form-signin .checkbox { 
    margin-bottom: 10px; 
} 
.form-signin .checkbox { 
    font-weight: normal; 
} 
.form-signin .form-control { 
    position: relative; 
    height: auto; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
      box-sizing: border-box; 
    padding: 10px; 
    font-size: 16px; 
} 
.form-signin .form-control:focus { 
    z-index: 2; 
} 
.form-signin input[type="email"] { 
    margin-bottom: -1px; 
    border-bottom-right-radius: 0; 
    border-bottom-left-radius: 0; 
} 
.form-signin input[type="password"] { 
    margin-bottom: 10px; 
    border-top-left-radius: 0; 
    border-top-right-radius: 0; 
} 

ここJSフィドルです： https://jsfiddle.net/Manoj85/wnw4j27u/

は、この情報がお役に立てば幸いです。