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

Validate table with input text if certain class is empty jquery

本文关键字：输入 文本 验证 jquery 如果      更新时间：2023-09-26

$('.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是否有一个空元素。我无法正确地进行检查。

预期：

加载时将检查所使用的表中是否有空输入，以便在更新期间，当用户从数据库中选择时，按钮将被禁用，属性将被更新。在change，keyup事件中，假设这是为了检查类notnull是否有空输入。指定notnull是因为其他输入不是强制性的。

任何想法都值得赞赏

给你的几个想法：

  • 与其检查所有.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');

检查所有加载：

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

并添加keyup事件侦听器：

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

这是一个正在工作的CodePen。

相关文章：