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>

在加载页面时，我手动调用change()事件来调用空输入。我尝试了3种方法来检查类notnull是否有一个空元素。我无法正确检查。

期望：

在加载时将检查表中是否有空输入，以便在用户从数据库中选择时更新期间将更新按钮属性已禁用。在更改，keyup事件中，这是为了检查是否存在类notnull的空输入。指定了notnull，因为其他输入不是必需的。

赞赏任何想法

Answer 1

为您提供一些想法：

不要检查所有.notnull项，而只检查已经拥有keyup事件的项目
创建一个负责在输入值为空时切换.disabled类的函数
然后你可以在加载和keyup上重用这个功能
不要设置属性disabled，因为这会阻止用户关注输入并更改其值！

例如，使用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>

这个JS功能：

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

您可以将.notnull元素存储在变量中：

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

检查所有onload：

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

添加keyup事件监听器：

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

这里是working CodePen。

如果某个类为空jquery，则使用输入文本验证表

1 个答案: