Validate table with input text if certain class is empty jquery

Question

$('.notnull').on('change keyup', function() {
  var empty;
  $('.notnull').each(function() {
    if (!$(this).val()) {
      console.log('Some fields are empty');
      empty = false;
    } else {
      empty = true;
    }
  });
  if (empty) {
    $('#add').prop('diabled', false).css('background-color', '#feaa38'); //
  } else {
    $('#add').prop('diabled', true).css('background-color', 'gray');

  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" value="Add " id="add" name="" class="btncrud" />
<table class="table">
  <tbody>
    <tr>

      <td>
        <select id="kind" name="kind" class="notnull">
          <option></option>
          <option id="10" data-code="B" value="B">B</option>
          <option id="1" data-code="L" value="L">L</option>
          <option id="3" data-code="M" value="M">M</option>
          <option id="11" data-code="O" value="Other">Other</option>
        </select>
      </td>
    </tr>
    <tr>

      <td>
        <input type="text" id="id" name="id" value="" class="notnull">
      </td>

      <td>
        <input type="text" id="id2" name="id2" maxlength="15" class="notnull">
      </td>
    </tr>
    <tr>

      <td>
        <input type="text" id="cloa" name="cloa" maxlength="15" value="" class="InputBox">
      </td>

      <td>
        <input type="text" id="oct" name="oct" maxlength="15" value="" class="notnull">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" id="survey" name="survey" maxlength="50" value="" class="InputBox">
      </td>
      <td>
        <select id="kind2" name="kind" class="notnull InputBox">

          <option></option>
          <option id="2" value="2">2</option>
          <option id="3" value="3">3</option>
          <option id="10" value="10">10</option>
          <option id="12" value="12">12</option>
          <option id="11" value="11">11</option>
          <option id="4" value="4">4</option>
          <option id="5" value="5">5</option>
          <option id="1" value="1">1</option>
          <option id="9" value="9">9</option>
          <option id="6" value="6">6</option>
        </select>
      </td>
    </tr>
    <tr>

      <td>
        <input type="text" id="lot" name="lot" maxlength="20" value="" class="InputBox">
      </td>
      <td>
        <input type="text" id="block" name="block" maxlength="10" value="" class="InputBox">
      </td>
    </tr>
    <tr>
      <td>
        <select id="statustype" name="statustype" class="notnull InputBox">
          <option></option>
          <option id="2" label="CD" value="2">2</option>
          <option id="6" label="DT" value="6">6</option>
          <option id="3" label="DC" value="3">3</option>
          <option id="5" label="DP" value="5">5</option>
          <option id="4" label="PC" value="4">4</option>
          <option id="8" label="RC" value="8">8</option>
          <option id="1" label="SD" value="1">1</option>
          <option id="7" label="TR" value="7">7</option>
        </select>
      </td>
      <td>
        <input type="text" id="area" name="area" class="notnull InputBox">
      </td>
    </tr>
    <tr>
    </tr>
    <tr>
      <td>
        <select id="province" name="province" class="notnull InputBox">
          <option id="26" value="26">26</option>
        </select>
      </td>
      <td>
        <select id="city" name="city" class="notnull InputBox">

          <option id="524" value="524">524</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <select id="district" name="" class="notnull InputBox">
          <option id="13609" value="13609">13609</option>
          <option id="13610" value="13610">13610</option>
          <option id="13611" value="13611">13611</option>
          <option id="13654" value="13654">13654</option>
        </select>
      </td>
      <td>
        <input type="text" id="street" name="street" maxlength="50" value="" class=" InputBox">
      </td>
    </tr>
    <tr>
      <td>
        <select id="zipcode" name="zipcode" class="notnull InputBox">

          <option id="835" value="4311">4311</option>
        </select>
      </td>
    </tr>

  </tbody>
</table>

On load of the page i manually call change() event to call the checking of empty input. I tried 3 ways to check if the class notnull has an element that is empty. I cant make the check properly.

Expectation:

On load will check if there are empty inputs in the table this is used so that during update when user select from database the button will property disabled will be updated. In the change, keyup event this is suppose to check if there are empty input with class notnull. notnull is specified because other input are not mandatory.

Any idea is appreciated

Answer 1

A few ideas for you:

• Rather than checking all .notnull items, check only the item that has had the keyup event
• Create a function that is responsible for toggling a .disabled class when the input's value is empty
• Then you can reuse this function on load and on keyup
• Don't set the property disabled, because that prevents the user from focusing on the input and changing it's value!

For example, with the HTML:

<input type="text" value="" class="notnull">
<select class="notnull">
  <option value=""></option>
  <option value="One">One</option>
  <option value="Two">Two</option>
  <option value="Three">Three</option>
</select>

And this JS function:

function toggleDisabled(target) {
  var $target = $(target);
  $target.toggleClass('disabled', !$target.val());
}

You can store the .notnull elements in a variable:

var $notnull = $('.notnull');

Check them all onload:

$notnull.each(function(i, el) {
  toggleDisabled(el);
});

And add keyup event listeners:

$notnull.on('keyup change', function(e) {
  toggleDisabled(e.currentTarget);
});

Here's a working CodePen.