如何根据表行中下拉列表的选择来验证文本框

时间：2017-01-02 10:38:55

标签： jquery

我在HTML表格中有三行数据，其中包含下拉列表和文本框，我希望每当我在下拉列表中选择缺席时行验证，文本框边框应该变为红色，下面需要文本框备注时需要消息在文本框中输入任何字符备注是必需的消息应该关闭。如果用户选择缺席，除非输入备注，否则应该给予第二行的许可

Fidde https://jsfiddle.net/ze05xkmf/1/

＆＃13;
＆＃13; 
$(document).ready(function() {
  $("#mytable").on("change", "input, select", function() {
    var $selects = $(this).closest('tr').find('td select'),
      $cells = $(this).closest("tr").find("td input");

    $cells.removeClass("has-error");
    $selects.removeClass("has-error");
    $cells.each(function() {
      if ($(this).val().trim() === '') {
        $(this).addClass("has-error");
      }
    });
    $selects.each(function() {

      if ($(this).val() == 'Absent') {
        $(this).addClass("has-error");
        $(".display_error").show();

      } else {
        $(this).removeClass("has-error");
      }
    });
  });
});
＆＃13; 
.has-error {
  border-style: solid;
  border-color: #ff0000;
}
.display_error {
  display: none;
  color: #a94442;
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  font-size: 85%;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <table id="mytable">
    <tr>
      <th>Row</th>
      <th>Name</th>
      <th>Status</th>
      <th>Remarks</th>
    </tr>
    <tr>
      <td>1</td>
      <td>
        Name1
      </td>
      <td>
        <select id="YN1" name="YN1" class="target">

          <option value="Present">Present</option>
          <option value="Absent">Absent</option>
          <option value="halfDAY">halfDAY</option>
        </select>
      </td>
      <td>
        <input type="TEXT" id="DATE1" name="DATE1" class="target" />
        <label class="display_error">Remarks required</label>
      </td>

    </tr>
    <tr>
      <td>2</td>
      <td>
        Name2
      </td>
      <td>
        <select id="YN2" name="YN2" class="target">
          <option value="Present">Present</option>
          <option value="Absent">Absent</option>
        </select>
      </td>
      <td>
        <input type="TEXT" id="DATE2" name="DATE2" class="target" />
        <label class="display_error">Remarks required</label>
      </td>

    </tr>
    <tr>
      <td>3</td>
      <td>
        Name3
      </td>
      <td>
        <select id="YN3" name="YN3" class="target">
          <option value="Present">Present</option>
          <option value="Absent">Absent</option>
        </select>
      </td>
      <td>
        <input type="TEXT" id="DATE3" name="DATE3" class="target" />
        <label class="display_error">Remarks required</label>
      </td>

    </tr>
  </table>
</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

只有在单击提交按钮时，才应在技术上显示它。或者，至少，当用户在来之后导航时。但要解决问题，您可以使用this关键字以及.closest()和.find()函数执行此操作：

if ($(this).val() == 'Absent') {
  $(this).addClass("has-error");
  $(this).closest("tr").find(".display_error").show();
}

使用此事件处理程序删除错误消息：

$(".target").keyup(function () {
  if (this.value.trim().length)
    $(this).closest("tr").find(".display_error").hide();
});

<强>段 

$(document).ready(function() {
  $("#mytable").on("change", "input, select", function() {
    var $selects = $(this).closest('tr').find('td select'),
        $cells = $(this).closest("tr").find("td input");
    $cells.removeClass("has-error");
    $selects.removeClass("has-error");
    $cells.each(function() {
      if ($(this).val().trim() === '') {
        $(this).addClass("has-error");
      } else {
        $(this).removeClass("has-error");
      }
    });
    $selects.each(function() {
      if ($(this).val() == 'Absent' && $(this).closest("tr").find("input.target").val().trim().length == 0) {
        $(this).addClass("has-error");
        // Change here:
        $(this).closest("tr").find(".display_error").show();
        // Add these lines:
      } else {
        $(this).removeClass("has-error");
      }
    });
  });
  // Add these lines:
  $(".target").keyup(function () {
    if (this.value.trim().length !== 0)
      $(this).closest("tr").find(".display_error").hide();
  });
});
.has-error {
  border-style: solid;
  border-color: #ff0000;
}
.display_error {
  display: none;
  color: #a94442;
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  font-size: 85%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <table id="mytable">
    <tr>
      <th>Row</th>
      <th>Name</th>
      <th>Status</th>
      <th>Remarks</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Name1</td>
      <td>
        <select id="YN1" name="YN1" class="target">
          <option value="Present">Present</option>
          <option value="Absent">Absent</option>
          <option value="halfDAY">halfDAY</option>
        </select>
      </td>
      <td>
        <input type="TEXT" id="DATE1" name="DATE1" class="target" />
        <label class="display_error">Remarks required</label>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Name2</td>
      <td>
        <select id="YN2" name="YN2" class="target">
          <option value="Present">Present</option>
          <option value="Absent">Absent</option>
        </select>
      </td>
      <td>
        <input type="TEXT" id="DATE2" name="DATE2" class="target" />
        <label class="display_error">Remarks required</label>
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>Name3</td>
      <td>
        <select id="YN3" name="YN3" class="target">
          <option value="Present">Present</option>
          <option value="Absent">Absent</option>
        </select>
      </td>
      <td>
        <input type="TEXT" id="DATE3" name="DATE3" class="target" />
        <label class="display_error">Remarks required</label>
      </td>
    </tr>
  </table>
</div>

答案 1 :(得分：0)

这是答案 

$(document).ready(function() {
$('select').on('change', function() {
 if ($(this).val() === 'Absent') {
     	 $(this).closest("tr").find("td input").addClass("has-error").focus();
        $(this).closest("tr").find(".display_error").show();
       }
       else
       {       
     $(this).closest("tr").find("td input").removeClass("has-error");
        $(this).closest("tr").find(".display_error").hide();
       }      
}) 
});



$(document).ready(function(){  
    $(".txt").keyup(function(){
     $(".display_error").hide();
      $(".txt").removeClass("has-error");
    });
});
.has-error {
  border-style: solid;
  border-color: #ff0000;
}
.display_error {
  display: none;
  color: #a94442;
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  font-size: 85%;
}
<div id="container">
  <table id="mytable">
    <tr>
      <th>Row</th>
      <th>Name</th>
      <th>Status</th>
      <th>Remarks</th>
    </tr>
   
   <tr>
      <td>1</td>
      <td>Name1</td>
      <td>
        <select id="statusDDN" name="astatus" class="target">
          <option value="Present">Present</option>
          <option value="Absent">Absent</option>
       
        </select>
      </td>
      <td>
     <input type="text" id="remarksID" name="remarks" class="txt" />
        <label class="display_error">Remarks required</label>
      </td>
    </tr>
    
    
    
   <tr>
      <td>1</td>
      <td>Name1</td>
      <td>
        <select id="statusDDN" name="astatus" class="target">
          <option value="Present">Present</option>
          <option value="Absent">Absent</option>
       
        </select>
      </td>
      <td>
     <input type="text" id="remarksID" name="remarks" class="txt" />
        <label class="display_error">Remarks required</label>
      </td>
    </tr>
    
    
    <tr>
      <td>1</td>
      <td>Name1</td>
      <td>
        <select id="statusDDN" name="astatus" class="target">
          <option value="Present">Present</option>
          <option value="Absent">Absent</option>
       
        </select>
      </td>
      <td>
     <input type="text" id="remarksID" name="remarks" class="txt" />
        <label class="display_error">Remarks required</label>
      </td>
    </tr>    
  </table>
</div>

相关问题
最新问题