jQuery disable button if either input is empty

Question

A button is disabled by default. There are two text inputs. If either are empty, the form should remain disabled. If both fields have value, the button should be enabled.

Trying this...

$(document).ready(function(){
    $('#custNameNext').prop('disabled',true);
    $('#customer').keyup(function(){
        $(this).val($(this).val().replace(/[^\w\s]+/g, ''));
        $('#custNameNext').prop('disabled', ((this.value == '') || ($('#customerCost').val() == '')) ? true : false);
    });
});

... but b/c I'm in a keyup, the button does not enable unless I have values in both fields, AND THEN RETURN to the first field with the keyup and enter additional text.

Having trouble thinking this thru!

Siavas · Accepted Answer · 2017-07-01 22:31:09Z

7

This should work for you:

$(document).ready(function() {
  $('#custNameNext').prop('disabled', true);

  function validateNextButton() {
    var buttonDisabled = $('#customer').val().trim() === '' || $('#customerCost').val().trim() === '';
    $('#custNameNext').prop('disabled', buttonDisabled);
  }

  $('#customer').on('keyup', validateNextButton);
  $('#customerCost').on('keyup', validateNextButton);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
  <input id="customer" name="first-input" type="text">
  <input id="customerCost" name="second-input" type="text">
  <input id="custNameNext" type="submit" value="Submit" disabled="disabled">
</form>

I have inserted the ids you already had in your snippet. As a suggestion, it would be better to omit long lines of code and split them into more coherent ones.

The test statement held into buttonDisabled can be changed, would you require any other validation for the submit button to be enabled (such as regex).

answered Jul 1, 2017 at 22:31

Siavas

5,1102 gold badges28 silver badges38 bronze badges

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

2 Comments

webguy Over a year ago

Thanks for your answer! Worked great for me as it incorporated the keyup function I needed. Having both fields use the same validation function is a brilliant way to make sure neither are empty, no matter which one is filled in first! I added my regex to validateNextButton and works like a charm!

Siavas Over a year ago

Very glad to help, @webguy.

adeneo · Accepted Answer · 2017-07-01 22:10:09Z

2

You can add both inputs to the event handler, and by using the input event you'll capture pasting and a few other scenarios as well.

Then just filter on the values to check if any of them are empty

$(document).ready(function() {
    $('#custNameNext').prop('disabled', true);

    $('#customer, #customerCost').on('input', function() {
          var val = $('#customer, #customerCost').filter(function() {
                return this.value.trim().length !== 0;
        }).length === 0;

        $('#custNameNext').prop('disabled', val);
    });
});

FIDDLE

answered Jul 1, 2017 at 22:10

adeneo

319k29 gold badges410 silver badges392 bronze badges

1 Comment

webguy Over a year ago

Thanks for your answer! I could not easily figure out how to integrate the keyup I needed to limit what could go in the customer filed, but I learned something from your answer and I appreciate that!

Collectives™ on Stack Overflow

jQuery disable button if either input is empty

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related