Disable submit if inputs empty jquery

Question

Disclaimer: I know there are quite a few questions out there with this topic and it has been highly addressed, though I need assistance in my particular case.

I am trying to check if the input values are empty on keyup then disable the submit button.

My HTML snippet:

<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='actions'>
      <input type="submit" value="Login" />
    </div>
  </form>
</div>

I have used the example answer from here with some modifications:

(function() {
    $('.field input').keyup(function() {

        var empty = false;
        $('.field input').each(function() {
            if ($(this).val() == '') {
                empty = true;
            }
        });

        if (empty) {
            $('.actions input').attr('disabled', true);
        } else {
            $('.actions input').attr('disabled', false);
        }
    });
})()

Any help would be greatly appreciated!

This was just answered for another question. see: stackoverflow.com/questions/9671323/… — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Mar 12, 2012 at 17:34

James Hill · Accepted Answer · 2019-10-22 12:13:10Z

28

I would suggest disabling the button by default. I would also look at the length of the .val(), not check for an empty string. Lastly, I think document.ready() is much more readable than your existing code: Here is the full code:

HTML

<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

JS/jQuery

$(document).ready(function() {
  $('.field input').on('keyup', function() {
    let empty = false;

    $('.field input').each(function() {
      empty = $(this).val().length == 0;
    });

    if (empty)
      $('.actions input').attr('disabled', 'disabled');
    else
      $('.actions input').attr('disabled', false);
  });
});

Here's a working fiddle.

edited Oct 22, 2019 at 12:13

answered Mar 12, 2012 at 17:37

James Hill

62.1k22 gold badges150 silver badges166 bronze badges

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

2 Comments

Thang Over a year ago

empty = $(this).val().length == 0 is not the same with your sample code on jsfiddle.net and it is not completely correct since the empty flag will only depend on the last input value

KcH Over a year ago

great idea mate , but how the same can be achieved for atleast one value is entered ?

Bellerofont · Accepted Answer · 2017-01-26 06:21:16Z

2

I use this in my project and it succes.

$(document).ready(function() {
  $('.field').keyup(function() {

    var empty = false;
    $('.field').each(function() {
        if ($(this).val().length == 0) {
            empty = true;
        }
    });                   

    if (empty) {
        $('.actions[type="submit"]').attr('disabled', 'disabled');
    } else {
        $('.actions[type="submit"]').removeAttr('disabled');
    }                
  });
});

edited Jan 26, 2017 at 6:21

Bellerofont

1,07918 gold badges17 silver badges16 bronze badges

answered Jan 26, 2017 at 5:20

Bariq Dharmawan

8375 gold badges17 silver badges26 bronze badges

Collectives™ on Stack Overflow

Disable submit if inputs empty jquery

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related