javascript - 在动态生成的表单中插入 JavaScript 验证

Question

我正在生成动态表单，只想插入 JavaScript在其中进行验证。

<?php
echo'<form action="" nam="airform" onsubmit="return check()">';

while ($row=$run->fetch_assoc()) {

    if (empty($array_vendor)) {
            echo "<option>NO ENTRIES FOUND!!</option></select></td>";
    }
    else {

       echo "<option value=''>Select</option>";

       for($i=0;$i<count($array_vendor);$i++){
           echo "<option> $array_vendor[$i]
           $array_phone[$i] ,VENDOR =  $array_name[$i]</option>";

       }
   }
   echo "</select></td><td><select name='carnumber' class='form-control'style='width:100px'class='nametwo'>";

   if (empty($array_car)) {
       echo "<option>NO ENTRIES FOUND!!</option></select></td>";
   }
   else {
       # code...
       echo "<option value=''>Select</option>";

       for($i=0;$i<count($array_car);$i++){

            echo "  <option> $array_car[$i],
             $array_belong[$i]</option>";

       }
   }
   echo "</select></td>";
   echo "<td><select name='status_option' class='form-control' class='namethree'>
              <option value=''>Select</option>
              <option>Completed</option>
              <option>Pending</option>
              <option>Cancelled</option>
              <option>Refunded</option>
          </select></td>
          <td><input type='submit' name='air_status' class='ui huge olive basic button' value='Update'></td>
          <td><input type='hidden' name='id_one' value='$row[id]'></td>
        </tr></form>";
?>

这是我的 JavaScript 验证

<script type="text/javascript">
    function check() {

        var input = document.forms['airform'].driverentry.value;
        var y = document.forms['airform'].carnumber.value;
        var z = document.forms['airform'].status_option.value;

        var fields = input.split(/=/);

        var name = fields[0];
        var street = fields[1];


        var a = y.split(/,/);

        var noneed = a[0];
        var need = a[1];


        if (input === "") {
            alert('Please select the driver detail');
            $(this).focus();
            return false;
        } else if (y === "") {
            alert('Please select the car number');
            $(".nametwo").focus();
            return false;
        } else if (z === "") {
            alert('Please select the status');
            $(".namethree").focus();
            return false;
        } else if (need != street) {
            alert('Vendor email on both the fields should match');
            $(".nametwo").focus();
            return false;
        } else {
            return true;
        }
    }
</script>

问题是验证仅适用于生成的第一个条目，但不适用于其他条目。我该如何修复它？

Answer 1

您是否尝试过将表单的 id 与函数一起传递，然后通过该 ID 访问表单？

<?php $i = 0; 
//looping logic
?>
<form id="someID<?php echo $i ?>" onsubmit="check(this.id)">

以上内容适用于您的表格，

然后在你的js中，

function check(id){
   var form = document.getElementById(id);
   //logic
}

现在我们已经有了表单的 ID，请参阅 Best Practice: Access form elements by HTML id or name attribute?这解释了如何通过 ID 访问表单元素