多個輸入值長度使用jQuery驗證

Question

我正在嘗試驗證多個輸入字段的長度，它僅對一個字段有效。 我希望它是檢查具有相同輸入名稱的所有字段，當長度相同時，請從下一步按鈕中刪除禁用的類。

這是我的代碼...

 jQuery(document).ready(function($) { $('input[name="date[]"]').keyup(function() { var DoB = []; $(".date").each(function(){ DoB.push($(this).val()); }); if (DoB.length == 10) { $('#stepname').removeClass('disabled'); } else { $('#stepname').addClass('disabled'); } }); 

 .disabled{ cursor: no-event; color: #ccc; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="date" name="date[]"> <input type="text" class="date" name="date[]"> <a href="#" id="stepname" class="btn disabled">Next Step</a> 

我希望你能理解我的問題。

提前致謝

Answer 1

發生此問題是因為新元素未與按鍵事件綁定。 您應該在文檔參考上綁定加鍵事件。

請試試：-

<input type="text" class="date" name="date[]">
<input type="text" class="date" name="date[]">

<a href="#" id="stepname" class="btn disabled">Next Step</a>

.disabled{
   cursor: no-event;
   color: #ccc;
}

jQuery(document).ready(function($) {
  $(document).on("keyup", 'input[name="date[]"]', function() {
      var DoB = [];
           $(".date").each(function(){
               DoB.push($(this).val());
            });
    if(DoB.length == 10) { 
      $('#stepname').removeClass('disabled');
    }
    else {
     $('#stepname').addClass('disabled');
    }
});

Answer 2

DoB.length將為您提供數組的長度。 因此，當前條件將無法確定所有值是否相同。

您可以使用every()檢查數組中的每個項目是否相同。 另外，我更喜歡map()和get()從元素的值生成數組。

您也缺少}); 在末尾。

 jQuery(document).ready(function($) { $('input[name="date[]"]').keyup(function() { var DoB = $(".date").map(function(){ return $(this).val(); }).get(); var isTrue = DoB.every(v => v === DoB[0]); if(isTrue) { $('#stepname').removeClass('disabled'); } else { $('#stepname').addClass('disabled'); } }); }); 

 .disabled{ cursor: no-event; color: #ccc; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="date" name="date[]"> <input type="text" class="date" name="date[]"> <a href="#" id="stepname" class="btn disabled">Next Step</a> 

Answer 3

如果我了解您的問題，這應該是適合您的解決方案。 ;）

 jQuery(document).ready(function($) { $('input[name="date[]"]').keyup(function() { var disabled = false; $('input[name="date[]"]').each(function(key, element){ if(element.value.length < 10) disabled = true; }); (disabled) ? $('#stepname').addClass('disabled') : $('#stepname').removeClass('disabled'); }); }); 

 .disabled { cursor: no-event; color: #ccc; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="date" name="date[]"> <input type="text" class="date" name="date[]"> <a href="#" id="stepname" class="btn disabled">Next Step</a> 

Answer 4

您也可以嘗試這個； 簡單而簡短：

 jQuery(document).ready(function($) { $('input[name="date[]"]').keyup(function() { $(this).attr("data-ln", this.value.length>=10?"ok":""); if ($('input[name="date[]"]:not([data-ln="ok"])')[0]) $('#stepname').addClass('disabled'); else $('#stepname').removeClass('disabled'); }); }); 

 .disabled{ cursor: no-event; color: #ccc; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="date" name="date[]"> <input type="text" class="date" name="date[]"> <a href="#" id="stepname" class="btn disabled">Next Step</a> 

---

解決方案中的問題是這樣的： DoB.length始終等於2。

同樣，在您針對每個輸入的keyup輸入的答案中，您可以檢查所有輸入的長度，這是不必要的。