入力フィールドがテーブル内にある場合のフォームの妥当性確認

Question

テーブル内に列としてあるテキストボックスがあります。

[OK]ボタンがクリックされたときに、列全体が空でないことを検証したいとします。

行う方法を教えて下さいそれ

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>

Answer 1

$('button').click(function() { 
 
    $('table textarea').each(function(i) { 
 
    if($(this).val()) { 
 
     $(this).parent().removeClass('has-error'); 
 
    } 
 
    else { 
 
    \t $(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>