输入字段在表中时的表单验证答案

【问题标题】：Form validation when input fields are in a table输入字段在表中时的表单验证
【发布时间】：2016-07-21 06:42:09
【问题描述】：

我有一个文本框，它在表格中作为一列。

我想在单击确定按钮时验证整个列不为空。

请告诉我怎么做

var formatTableMandatoryValueColumn = function(value, row/* , index*/)  
{
    return '<div class="form-group mandatory-div"><input class="m-value form-control" placeholder="Enter value" type="text" value="' + row.value + '"></div>';
 };

@* Mandatory Table *@
<div class="row padding-left-40px padding-right-20px padding-top-10px padding-bottom-10px" id="table-rules-mandatory-ccp-value-modal-div">
    <table class="table-condensed" id="table-rules-mandatory-ccp-value-modal" data-classes="table table-no-bordered table-line-color-white" data-cache="false" data-striped="false" data-page-size="20" data-show-header="false">
         <thead>
              <tr>
                   <th data-field="key"></th>
                   <th data-field="operator" data-sortable="true"></th>                   <th data-field="value" data-sortable="true" data-formatter="BusinessPortal.Rules.CCPModal.formatTableMandatoryValueColumn" data-events="BusinessPortal.Rules.CCPModal.handleCCPTableMandatoryValueColumnEvents"></th>
              </tr>
        </thead>
    </table>
</div>
<button type="button" class="btn btn-primary width-60px" onclick="BusinessPortal.Recommendation.Email.Preview.setCCPValueJson();">OK</button>

【问题讨论】：

标签： javascript jquery bootstrap-table

【解决方案1】：

$('button').click(function() {
  $('table textarea').each(function(i) {
    if($(this).val()) {
        $(this).parent().removeClass('has-error');
    }
    else {
    	$(this).parent().addClass('has-error');
    }
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<table>
  <tr>
    <th>Some header</th>
  </tr>
  <tr>
    <td>
      <div class="form-group">
        <textarea class="form-control"></textarea>
      </div>
    </td>
  </tr>
</table>
<button type="button" class="btn btn-primary width-60px">OK</button>

【讨论】：