Disable form submit button if all input and textarea are empty except one

Question

I need to enable a submit button only when each input fields has a value except one. The except one.

HTML:

// start of form
<input type='text /> // cant be blank
<input type='text /> // cant be blank
<input type='text /> // cant be blank
<textarea type='text /> // cant be blank
<button type='submit'>Submit</button>
// end of form
<input id='subscription-input' type='text /> // exclude this one only
[...]

JS:

function doCheck(){
  var allFilled = true;
  $('input[type=text]').not('#subscription-input').each(function(){
      if($(this).val() == ''){
          return false;
      }
  });
  if (allFilled) {
    // Apply active css and enable button
    $('button[type=submit]').removeClass('form-submit--plain').addClass('form-submit--active');
    $('button[type=submit]').prop('disabled', !allFilled);
  }
}

$(document).ready(function(){
  $('input[type=text]').keyup(doCheck).focusout(doCheck);
});

Basically I need a way to get the textarea field so I thought adding wilecard ( * ) would work:

$('*[type=text]').not('#subscription-input').each(function(){...}

How to get the input and textarea fields?

Answer 1

change code to:

function doCheck(){
  var allFilled = true;
  $('input[type=text]:not(#subscription-input),textarea').each(function(){
      if($(this).val() == ''){
          allFilled=false;
      }
  });
  if (allFilled) {
    // Apply active css and enable button
    $('button[type=submit]').removeClass('form-submit--plain').addClass('form-submit--active');
    $('button[type=submit]').prop('disabled', !allFilled);
  }
}

$(document).ready(function(){
  $('input[type=text]').keyup(doCheck).focusout(doCheck);
});

Answer 2

Here you go with the solution https://jsfiddle.net/ehjxvz4j/1/

 function doCheck(){ var allFilled = true; $('input[type=text]').not('#subscription-input').each(function(){ if($(this).val() == ''){ allFilled = false; } }); if($('textarea').val() == ''){ allFilled = false; } if (allFilled) { // Apply active css and enable button $('button[type=submit]').removeClass('form-submit--plain').addClass('form-submit--active'); } $('button[type=submit]').prop('disabled', !allFilled); } $(document).ready(function(){ $('input[type=text], textarea').focusout(doCheck); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type='text' /> <input type='text' /> <input type='text' /> <textarea></textarea> <button type='submit' disabled>Submit</button> <input id='subscription-input' type='text'/> 

Answer 3

Apply the same class to all the fields and attach event to that class with a not for the ID:

 function doCheck() { var allFilled = true; $('.form-fields:not(#subscription-input)').each(function() { if ($(this).val() == '') { allFilled = false; } }); $('button[type=submit]').prop('disabled', !allFilled); if (allFilled) { $('button[type=submit]').removeAttr('disabled'); } } $(document).ready(function() { doCheck(); $('.form-fields').keyup(doCheck); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type='text' class='form-fields' /> <input type='text' class='form-fields' /> <input type='text' class='form-fields' /> <textarea class='form-fields'></textarea> <input id='subscription-input' class='form-fields' type='text' /> <button type='submit'>Submit</button>