jQuery驗證2個字段

Question

我有以下HTML代碼：

// lets monitor the input of values for inputs you can use a class also 
 
    $('input').on('input', function() { 
 
    // added for bit of simplicity or you can directly get valuess 
 
    var step3in1b = $('#step3in1').val(); 
 
    var thedate3in2 = $('#step3in2').val(); 
 
    if (step3in1b != "" && thedate3in2 != "") { 
 
     // values seems filled remove class 
 
     $('#step3in1Btn').removeClass('disabled'); 
 
    } else { 
 
     // user has emptied some input so add class again. 
 
     $('#step3in1Btn').addClass('disabled'); 
 
    } 
 
    }); 
 

 
    
 
    $(function($){ 
 
    $("#step3in1").mask("99/99/9999"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://archive.conductiva.com/files/demos/maskedin/jquery.maskedinput-1.2.2-co.min.js"></script> 
 
<script src="jquery.maskedinput.js" type="text/javascript"></script> 
 
<div class="field text-left"> 
 
    <div class="col-lg-6 col-sm-6 col-xs-12"> 
 
    <label class="text-left">Date of Birth</label> 
 
    <input type="text" id="step3in1" name="step3in1b" placeholder="__/__/____" /> 
 
    </div> 
 
    <div class="col-lg-6 col-sm-6 col-xs-12"> 
 
    <label class="text-left">Telephone Number</label> 
 
    <input type="tel" id="step3in2" name="thedate3in2" placeholder="+32 000 000 000" /> 
 
    </div> 
 
</div> 
 
<div class="field"> 
 
    <div class="col-lg-6 col-lg-offset-3 col-sm-8 col-sm-offset-2 col-xs-12 col-xs-offset-0"> 
 
    <div class="col-lg-12 col-sm-12 col-xs-12"> 
 
     <a href="#" id="step3in1Btn" class="btn disabled">Next Step</a> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div> 
 
</div>

A聯杆被用作一個鏈接，並具有與類禁用，使得默認顯示灰色（工作）。當用戶填寫兩個輸入字段時，則該按鈕的類別已禁用已刪除。

它看起來是正確的，但它不起作用。有人可以幫忙嗎？

Answer 1

您只需使用keyup或focus或blur函數來檢查用戶填充輸入後的輸入值。

$('input').on('keyup blur focus', function() { 
 
    var step3in1b = $('#step3in1').val(); 
 
    var thedate3in2 = $('#step3in2').val(); 
 
    if (step3in1b != "" && thedate3in2 != "") { 
 
     $('#step3in1Btn').removeClass('disabled'); 
 
    } else { 
 
     $('#step3in1Btn').addClass('disabled'); 
 
    } 
 
    });

.disabled { 
 
    color: gray; 
 
    text-decoration: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="field text-left"> 
 
    <div class="col-lg-6 col-sm-6 col-xs-12"> 
 
    <label class="text-left">Date of Birth</label> 
 
    <input type="text" id="step3in1" name="step3in1b" placeholder="__/__/____" /> 
 
    </div> 
 
    <div class="col-lg-6 col-sm-6 col-xs-12"> 
 
    <label class="text-left">Telephone Number</label> 
 
    <input type="tel" id="step3in2" name="thedate3in2" placeholder="+32 000 000 000" /> 
 
    </div> 
 
</div> 
 
<div class="field"> 
 
    <div class="col-lg-6 col-lg-offset-3 col-sm-8 col-sm-offset-2 col-xs-12 col-xs-offset-0"> 
 
    <div class="col-lg-12 col-sm-12 col-xs-12"> 
 
     <a href="#" id="step3in1Btn" class="btn disabled">Next Step</a> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div> 
 
</div>