在formigniter中使用javascript进行表单验证

问题描述

| 嗨，我有一个jQuery表从datebase填充：

<?PHP 
$attributes = array(\'name\' => \'users\');

echo form_open(\'users/action\',$attributes);?>
<table class=\"data display datatable\" id=\"example\">
    <thead>
        <tr>
          <th>Username</th>
          <th>Name</th>
          <th>Nickname</th>
          <th>Birthday</th>
          <th>Sex</th>
          <th>Address</th>
          <th><input type=\"checkBox\" id=\"select all\"></th>
        </tr>
    </thead>
    <tbody> 
<?PHP foreach($query->result_array() as $row): ?>
        <tr class=\"even gradeC\">
            <td><?PHP echo anchor(\'users/details/\'.$row[\'usrID\'],$row[\'usrName\']);?></td>
            <td><?PHP echo $row[\'usrpFirstName\'].\' \'.$row[\'usrpLastName\'];?></td>
            <td><?PHP echo $row[\'usrpnick\'];?></td>
            <td><?PHP echo $row[\'usrpBday\'];?></td>
            <td><?PHP echo $row[\'usrpSex\'];?></td>
            <td><?PHP echo $row[\'usrpAddress\'];?></td>
            <td><input type=\"checkBox\" name=\"checkID[]\" id=\"checkID\" value=\"<?PHP echo $row[\'usrID\'];?>\" />

              <label for=\"checkID\"></label></td>
        </tr>
<? endforeach; ?>
    </tbody>
</table>
  <input type=\"submit\" name=\"Delete\" id=\"Delete\" value=\"Delete\" class=\"btn btn-orange\" />
  <input type=\"submit\" name=\"Edit\" id=\"Edit\" value=\"Edit\" class=\"btn btn-orange\" onclick=\"return validateForm()\" />
  <input type=\"submit\" name=\"AddUser\" id=\"Add User\" value=\"Add User\" class=\"btn btn-orange\" />
 </form>

如下所示，我使用checkID[]，以便获取每个用户的每个ID。我确实在编辑按钮上做了一个onlick，以便它将检查ID是否为空。这是我的js函数

<head>
<script type=\"text/javascript\">
function validateForm()
{
var x=document.forms[\"users\"][\"checkID[]\"].value
if (x==null || x==\"\")
  {
  alert(\"Please select user to edit.\");
  return false;
  }
}
</script>
</head>

现在的问题是，即使我在表中检查了一位用户，它仍然会发出警报。即使我使用这个：

<?PHP 
$attributes = array(\'name\' => \'users\',\'onsubmit\' =>\"return validateForm()\");

echo form_open(\'users/action\',$attributes);?>

解决方法

document.forms[\"users\"][\"checkID[]\"]将为您提供所有具有该名称的复选框的数组。您要的是数组的value，没有意义。您需要遍历它们，以查找是否已通过以下方式进行检查：

function validateForm() {
   var checkboxes = document.forms[\"users\"][\"checkID[]\"];
   for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].checked) {
         return true;
      }
   }

   alert(\"Please select a user to edit.\");
   return false;
}

我没有测试过，但是该代码应该可以为您提供总体思路。