CODEWITHSUNDEEP
javascriptjquery
Shawn Cooke
Shawn Cooke

Reputation: 967

Jquery disable a button until two inputs have minimum length

I am trying to keep an input disabled until 2 inputs have atleast 4 characters. The closest I was able to find on SO was a user settling for 8 characters total but this would allow for one of the inputs to be blank in the other had over 8. Here is what I have tried:

Without on()

$('#ancestor input').keyup(function(){
  var foo = $('input[name=foo]').val();
  var bar = $('input[name=bar]').val();    
    if(foo.length > 4 && bar.length > 4){  
      $('#some-button').prop('disabled', false);
      }else{
      $('#some-button').prop('disabled', true);
      }  
});

With on()

$('#ancestor input').on('keyup',function(){
  var foo = $('input[name=foo]').val();
  var bar = $('input[name=bar]').val();    
    if(foo.length > 4 && bar.length > 4){  
      $('#some-button').prop('disabled', false);
      }else{
      $('#some-button').prop('disabled', true);
      }  
});

Interestingly I can console.log(foo.length) and console.log(bar.length) and see both lengths ticking up just fine with each keyup.

Upvotes: 2

Views: 2309

Answers (4)

Shawn Cooke
Shawn Cooke

Reputation: 967

The fact is, I've been staring at this for 3 hours and it was just a typo (misspelled length as lengh on one of the variables). Needed more coffee to see it apparently. Thanks to everyone for helping.

Upvotes: 0

Sean Wessell
Sean Wessell

Reputation: 3510

You could try matching the jquery object length against a filtered jquery object to see if they are different. 

$('#ancestor input').on('input keyup change paste', function () {
    var els = $('input[name=foo],input[name=bar]');
    var filtered = els.filter(function(){
       return (this.value.length >= 4); 
    });
    $('#some-button').prop('disabled', (els.length != filtered.length));
});

http://jsfiddle.net/9se4x2an/

Upvotes: 0

Leon Adler
Leon Adler

Reputation: 3331

As A. Wolff has mentioned, your condition is using > instead of >=.

if (foo.length >= 4 && bar.length >= 4) {

If you have 2 input elements, you can also invert the condition:

$('#ancestor input').keyup(function(){
  var lengthA = $('input[name=foo]').val().length;
  var lengthB = $('input[name=bar]').val().length;

  $('#some-button').prop('disabled', lengthA < 4 || lengthB < 4);
});

Conceptually that means "disable if any input is not 4 characters long" instead of "do not disable if both inputs are more than 4 characters long".

Upvotes: 5

shennan
shennan

Reputation: 11656

Your code works as far as I can see. The only issue is that your condition checks for at least 5 characters, not 4 characters, due to the operator you've chosen to use.

Use a >= instead, as this asserts something that is "equal to or greater than".

$('#ancestor input').on('keyup',function(){
  
  var foo = $('input[name=foo]').val();
  var bar = $('input[name=bar]').val(); 
  
  $('#some-button').prop('disabled', !(foo.length >= 4 && bar.length >= 4));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="ancestor">
  <input name="foo">
  <input name="bar">
  <input id="some-button" type="submit" disabled>
</form>

Upvotes: 2

Related Questions