CODEWITHSUNDEEP
javascriptjqueryhtml
Zain
Zain

Reputation: 662

Multiple input value length validate with jQuery

I'm trying to validate multiple input field length, it is working fine only with one field. I want it to be check all the field with same input name, when the length is same then remove the disabled class from next step button.

This is my code...

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>

I hope you understand my question.

Thanks in advance

Upvotes: 1

Views: 1542

Answers (4)

Hassan Sadeghi
Hassan Sadeghi

Reputation: 1326

You can try this too; simple and short:

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>

The problem in your solution is this: DoB.length equals 2 always.

also, in your answer for per input's keyup you check all input's length which it is not necessary.

Upvotes: 0

Mamun
Mamun

Reputation: 68933

DoB.length will give you the length of the array. Thus the current condition will not determine whether all the values are same or not.

You can check whether each item in the array are same or not with every(). Also I prefer map() and get() to generate the array from the element's value.

You are also missing }); at the end.

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>

Upvotes: 1

jsadev.net
jsadev.net

Reputation: 2590

If i've understood your question, this should be the right solution for you. ;)

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>

Upvotes: 0

g8bhawani
g8bhawani

Reputation: 674

The problem is occurred because of new element is not binded with key-up event. you should bind key-up event on document reference.

Please try:-

<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');
    }
});

Upvotes: 1

Related Questions