javascript - Showing error in a table row if a checkbox is not checked or an input field has no value on btn click

Question

I have a table and dynamic form fields. I would like to show an error on the row having a checkbox and input field if the rows input field is empty and checkbox field in the row is not checked.

This is the php code that generates the input fields

    <table class="table table-striped">
                <thead>
                <tr>
                    <th>#</th>
                    <th>Description</th>
                    <th>Status</th>
                    <th>Comment</th>
                </tr>
                </thead>
                <tbody>

 foreach ($checks as $m => $check) {
    $item ="";
    $checkbox ="";
   $textinput ="";
   $displayx="";

if ($check->mandatory_customer == 1) { //mandatory customer checks
 $displayx .="<i style='color:red;'>*</i>";
  $item .=  $check->item.$displayx;
   $checkbox .='<input type="checkbox" class="1" id="chk'.$m.'">' ;
   $textinput .='<input type="text" class="1" id="txt'.$m.'">' ;

     } else { //not mandatory customer
    $item .=  $check->item;
   $checkbox .='<input type="checkbox" class="0" id="chk'.$m.'">' ;
 $textinput .='<input type="text" class="0" id="txt'.$m.'">' ;

    }

echo "<tr id='" . $m . "'>";  //error should be set here eg: style:border: 2px solid red; 
echo "<td>" . $m . "</td>";
echo "<td>" . $item . "</td>";
echo "<td>".$checkbox."</td>";
echo "<td>".$textinput."</td>";
echo "</tr>";
}
  ?>
     }

</tbody>

Currently if a checkbox is checked the input field is disabled . This is what am using to disable the input fields

$('input[type=checkbox]').change(function() {
if (this.checked) {
  $(this).closest('tr').find('input[type=text]').prop('disabled', true);
  $(this).closest('tr').find('input[type=text]').val("");
} else {
  $(this).closest('tr').find('input[type=text]').prop('disabled', false);
}

});

I have a button that on click i would like to display the error on the tr above if the ceckbox is not checked and the input field is empty how do i go about this.

This is the button

 <button class="btn btn-success" id="approve_btn">Approve</button>

I have tried:

    $("#approve_btn").on("click", function() {
     $('input[type=checkbox]').each(function() {
   if (!$(this).is(':checked')) {
     var inputfield = $(this).closest('tr').find('input[type=text]').val();
     if(inputfield ==""){
        console.log($(this));
        $(this)[0].closest('tr').style.background = "thick solid #0000FF";

     }

    }
  }

  );

but fails to work

Answer 1

Check what jQuery find() method is returning. I think it returns set of elements, not a single one. So you can't get val() of set. Try to get inputfield[0].val()