Jquery disable a button until two inputs have minimum length

Question

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.

At least 4 characters so should be >= 4. Now, what is your issue??? — A. Wolff
– A. Wolff, Commented Nov 19, 2015 at 17:33
"atleast 4 characters" -> you should've used >3 instead of >4? jsfiddle.net/9woyctz2 — nicael
– nicael, Commented Nov 19, 2015 at 17:33
Except for the typo in the > sign, it looks like your stuff was working. — Ernesto
– Ernesto, Commented Nov 19, 2015 at 17:40
your code might works, you should use >3 for atleast four chars — Azad
– Azad, Commented Nov 19, 2015 at 17:42

Leon Adler · Accepted Answer · 2015-11-19 17:39:45Z

5

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".

edited Nov 19, 2015 at 17:39

answered Nov 19, 2015 at 17:37

Leon Adler

3,3921 gold badge33 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Leon Adler Over a year ago

@nicael reverted your change, the opposite of not( A >= 4 && B >= 4) is A < 4 || B < 4. Is it fine to just edit it back? Don't know yet how to provide feedback "stackoverflow-correctly".

nicael Over a year ago

It's completely fine, because I have been just dumb. Sorry.

shennan · Accepted Answer · 2015-11-19 17:38:23Z

2

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>

answered Nov 19, 2015 at 17:38

shennan

11.8k5 gold badges52 silver badges94 bronze badges

2 Comments

Ernesto Over a year ago

Might want to have it disabled initially.

shennan Over a year ago

@Ernesto just noticed that. :-)

Sean Wessell · Accepted Answer · 2015-11-19 17:44:17Z

0

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/

answered Nov 19, 2015 at 17:44

Sean Wessell

3,5201 gold badge15 silver badges20 bronze badges

Comments

Shawn Cooke · Accepted Answer · 2015-11-19 18:07:43Z

0

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.

answered Nov 19, 2015 at 18:07

Shawn Cooke

9671 gold badge12 silver badges31 bronze badges

Collectives™ on Stack Overflow

Jquery disable a button until two inputs have minimum length

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related