Question

18

Disable submit if inputs empty jquery

rated 0 times [ 24] [ 6] / answers: 1 / hits: 60179 / 13 Years ago, mon, march 12, 2012, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lailab

Add To Favorites

Follow

Total Points: 706

Total Questions: 102

Total Answers: 95

Location: Falkland Islands

Member since Mon, Jul 13, 2020

4 Years ago

lailab questions

1 How can I solve this error? export 'default' (imported as 'App') was not found in './App' (possible exports: App) (im using react)

Sat, Jan 15, 22, 00:00, 2 Years ago

1 How to test a global event bus in VueJS

Fri, Feb 21, 20, 00:00, 4 Years ago

1 TypeError: render is not a function updateContextConsumer

Tue, Feb 4, 20, 00:00, 4 Years ago

1 How to add font awesome icon dynamically from JS file?

Sun, Apr 14, 19, 00:00, 5 Years ago

1 NestJs: How to have Body input shape different from entity's DTO?

Mon, Apr 1, 19, 00:00, 5 Years ago

View All

answered 13 Years ago ammonderekm · Accepted Answer

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.