Disable submit button until all fields are complete

Question

I'm working on a calculation form and would like to disable the submit button until all of the fields have been filled. The form consists of one number input and four select options.

Though I've investigated a few different solutions, Like the following:

Disabling submit button until all fields have values

Enable submit button only when all fields are filled

For some reason, whenever I type a value into the number input, it immediately overrides the disabling of the submit button, whereas all of the select options should also be chosen before the submit button is enabled.

I've based my code on the second example linked above.

    // Check if all fields have been filled out
    // Initially disable submit button
    $('#submit').attr('disabled', 'disabled'); 

     //Check number input for value and compare to select options bind to input keyup, mouseup event
      $("#acre").on('keyup mouseup', function() {
        // check if input has value, search all select options, (id prefixed by #forest) if they have a value set.
        if ($(this).val() != "" && $('[id^=forest]').val() != "" ){
            $('#submit').removeAttr('disabled'); 
        } else {
             $('#submit').attr('disabled', 'disabled'); 
        }

      });
     // Similar for select options
      $('[id^=forest]').on('change', function() {
        if ($(this).val() != "" && $('#acres').val() != "" ){
            $('#submit').removeAttr('disabled'); 
        } else {
             $('#submit').attr('disabled', 'disabled'); 
        }

      });

Any advice would be appreciated.

Thanks,

Tak

Answer 1

If you add the required attribute to your input tags it will not let you submit until all required fields are filled out. Unfortunately this does not work in Safari. It is supported by all other major browsers including IE. This is the simplest solution and does not require and javascript.

<input type="text" name="firstname" required>

You can use the code below to add Safari validation. I modified some code from @snorri.

$(document).on("submit", function(e) {
  $(this)
    .find("input, select, textarea")
    .filter("[required]")
    .filter(function() {
      return this.value == '';
    })
    .first()
    .each(function() {
      e.preventDefault();
      $(this).css({
        "border-color": "red"
      });
      alert($(this).prev('label').html() + " is required!");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label for="first">First name:</label>
  <input type="text" name="firstname" id="first" required>
  <br>
  <label for="last">Last name:</label>
  <input type="text" name="lastname" id="last" required>
  <br>
  <input type="submit" value="Submit">
</form>

Answer 2

Actually, the second answer to this question by Blazemonger solved my problem:

  $form = $('#annual-income'); // cache
  $form.find(':input[type="submit"]').prop('disabled', true); // disable submit btn
  $form.find(':input').change(function() { // monitor all inputs for changes
    var disable = false;
    $form.find(':input').not('[type="submit"]').each(function(i, el) { // test all inputs for values
        if ($.trim(el.value) === '') {
            disable = true; // disable submit if any of them are still blank
        }
    });
    $form.find(':input[type="submit"]').prop('disabled', disable);
});

This solution seems to work regardless of what type of fields the form contains.

Answer 3

More easy way we can solve it and check null input by a class so we can fixed our required input. Live Link

$(document).on('change keyup', '.required', function(e){
   let Disabled = true;
    $(".required").each(function() {
      let value = this.value
      if ((value)&&(value.trim() !=''))
          {
            Disabled = false
          }else{
            Disabled = true
            return false
          }
    });

   if(Disabled){
        $('.toggle-disabled').prop("disabled", true);
      }else{
        $('.toggle-disabled').prop("disabled", false);
      }
 })

 $(document).on('change keyup', '.required', function(e){
   let Disabled = true;
    $(".required").each(function() {
      let value = this.value
      if ((value)&&(value.trim() !=''))
          {
            Disabled = false
          }else{
            Disabled = true
            return false
          }
    });
   
   if(Disabled){
        $('.toggle-disabled').prop("disabled", true);
      }else{
        $('.toggle-disabled').prop("disabled", false);
      }
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="required">
    <option value="" selected disabled>selected a value</option>
    <option>Car</option>
    <option>Buss</option>
    <option>Train</option>
</select>

<select class="required">
    <option value="" selected  disabled>selected a option</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
</select>

<input type="text" class="required" placeholder="Full Name">
<input type="number" class="required" placeholder="Age">

<button type="button" class="toggle-disabled" disabled>Submit</button>