jQuery 仅在循环的第一行验证输入字段

Question

这是我在这里的第一篇文章，所以如果格式错误，我提前道歉。

我正在开发一个表单，该表单使用循环从 MySQL 中提取数据并将其输出到 HTML 页面。然后，用户可以选择批准或拒绝条目，并且根据用户选择，验证应该是必需的还是可选的。我当前的代码将正确验证，但仅适用于从循环输出的第一行。我正在尝试验证所有行。我尝试使用 while 循环和 foreach 语句，但没有成功。任何帮助将不胜感激！

我的循环和表格：

  //connect  to the database 
  $db=mysqli_connect('localhost','root','') or die ('I cannot connect to the database  because: ' . mysql_error()); 
  //-select  the database to use 
  $mydb=mysqli_select_db($db,"my_db") or die(mysql_error());
  //-query  the database table 
  $sql="SELECT id, date, client_name, client_number, date_completed, status FROM clients WHERE client_name LIKE '%" . $search  ."%' OR status LIKE '%" . $search  ."%' "; 
  //-run  the query against the mysql query function 
  $result=mysqli_query($db, $sql); 
  //-count  results 
  $rows=mysqli_num_rows($result);

  if($rows=mysqli_num_rows($result)) { 
  echo  "<h2 style='margin-left: 10em;margin-bottom: -0.4em;'><br><br><br>" . $rows . " result(s) found for " . $search . "</h2><br />"; 
  }elseif($rows=mysqli_num_rows($result) == 0) {
  echo  "<h2 style='margin-left: 10em;margin-bottom: -0.4em;'><br><br><br>0 result(s) found for " . $search . "</h2><br />";        
  }
  //-create  while loop and loop through result set 
  while($row=mysqli_fetch_assoc($result)){ 

  $id=$row['id'];
  $date=$row['date'];
  $client_name=$row['client_name'];
  $client_number=$row['client_number'];
  $date_completed=$row['date_completed'];
  $status=$row['status'];

    echo "<form  method='post' enctype='multipart/form-data' action=''>";
    echo "<table border='0'>";
    echo  "<tr>\n";
    echo  "<td>Timestamp</td><td>Client Name</td><td>Client Number</td>Status</td><td>Date Completed & Returned</td><td>Upload Zip Files</td>\n";
    echo  "</tr>";
    echo  "<tr>\n";
    echo  "<td readonly class='date'>$date</td>\n";
    echo  "<td><input readonly type='text' id='client_name' name='client_name' value='$client_name'></td>\n";
    echo  "<td><input readonly type='text' id='client_number' name='client_number' value='$client_number'></td>\n";
    echo  "<td><select id='status' name='status' aria-invalid='false'>
    <option value=''>Select an option</option>
    <option value='Denied'>Denied</option>
    <option value='Approved'>Approved</option>
    </select></td>\n"; 
    echo  "<td><input type='date' id='date_completed' name='date_completed_returned' value='$date_completed'></td>\n"; 
    echo  "<td><input type='file' id='upload' name='upload'></td>"; 
    echo  "<td class='submit'><input type='hidden' id='hidden' name='hidden' value='$client_name'><input type='submit' id='save' name='save' value='Save'></td>\n"; 
    echo  "</tr>"; 
    echo "</table>";
    echo "</form>";
   }

我的 jQuery 代码：

如果用户在状态字段下选择“已批准”，我正在尝试设置 date_completed 和上传字段，如果他选择“拒绝”，则为可选。

    <script>      
    $('#status').on('change', function() {
    if ( this.value == 'Approved')
    $("#date_completed").prop('required',true)  
    }).trigger("change"); // notice this line

    $('#status').on('change', function() {
    if ( this.value == 'Approved')
    $("#upload").prop('required',true)
    }).trigger("change"); // notice this line
    </script>

Answer 1

感谢 KevinB，我能够找到解决问题的方法。

我为尝试验证的输入字段（状态、日期完成、上传）添加了类名：

以下更新代码：

echo "<form  method='post' enctype='multipart/form-data' action=''>";
echo "<table border='0'>";
echo  "<tr>\n";
echo  "<td>Timestamp</td><td>Client Name</td><td>Client Number</td>Status</td><td>Date Completed & Returned</td><td>Upload Zip Files</td>\n";
echo  "</tr>";
echo  "<tr>\n";
echo  "<td readonly class='date'>$date</td>\n";
echo  "<td><input readonly type='text' id='client_name' name='client_name' value='$client_name'></td>\n";
echo  "<td><input readonly type='text' id='client_number' name='client_number' value='$client_number'></td>\n";
echo  "<td><select id='status' name='status' class='status' aria-invalid='false'>
<option value=''>Select an option</option>
<option value='Denied'>Denied</option>
<option value='Approved'>Approved</option>
</select></td>\n"; 
echo  "<td><input type='date' id='date_completed' name='date_completed' class='date_completed' value='$date_completed'></td>\n"; 
echo  "<td><input type='file' id='upload' name='upload' class='upload'></td>"; 
echo  "<td class='submit'><input type='hidden' id='hidden' name='hidden' value='$client_name'><input type='submit' id='save' name='save' value='Save'></td>\n"; 
echo  "</tr>"; 
echo "</table>";
echo "</form>";

<script>
$('.status').on('change', function() {
if ( this.value == 'Approved')
$('.date_completed').prop('required',true)  
}).trigger("change"); // notice this line

$('.status').on('change', function() {
if ( this.value == 'Approved')
$('.upload').prop('required',true)
}).trigger("change"); // notice this line
</script>