Question

我希望在提交表单之前检查是否至少检查了一个复选框，这是我的代码：

<script type="text/javascript">
function validate() {
    if (document.getElementById('checking').checked) {
        alert("checked");
    } else {
        alert("You didn't check it! Let me check it for you.")
    }
}
</script>

<?php foreach (..... ) : ?>

<form name="frm1" id="frm1" method="post" action="next.php" >
...
<input type="checkbox" value="" class="chk"  id="checking"/>
...
 <a href="#" onclick="$(this).closest('form').submit(); validate();"  id="add_view" ><img src="/submit.png"></a>

....

</form>

我确实喜欢这样，但它似乎对我不起作用，我看到了消息，但同时也提交了提交，还没有确认至少检查了一个复选框？

Answer 1

Onclick正在触发事件，验证和提交。例如，如果验证成功，您可以将提交部分放在验证脚本中，并仅提交表单。

编辑：发布更完整的代码示例

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  </head>
  <body>
    <script type="text/javascript">
    function validate() {
      if ($('#checking').is(':checked')) {
        $('#frm1').submit();
      } else {
        alert("You didn't check it! Let me check it for you.");
        $('#checking').attr('checked', true);
      }
    }
    </script>

    <form name="frm1" id="frm1" method="post" action="next.php" >
      <input type="checkbox" value="" class="chk"  id="checking"/>
      <a href="#" onclick="validate(); return false;" id="add_view"><img src="/submit.png"></a>
    </form>
  </body>
</html>

此外，您还应考虑添加服务器端验证（如果还不存在），因为用户可以使用FireBug等工具在运行时轻松更改页面上的HTML / JavaScript，并提交无效的数据。

Answer 2

我在原来的回答中建议你需要“类似......”。

这应该是一个完整的解决方案。需要添加的技巧是validate应返回true / false，以便我们决定是否提交表单。

<script type="text/javascript">
  function validate() {
    if (document.getElementById('checking').checked) {
      alert("checked");
      return true;
    } else {
      alert("You didn't check it! Let me check it for you.")
      return false;
    }
  }
</script>


<form name="frm1" id="frm1" method="post" action="next.php" >
  <input type="checkbox" value="" class="chk"  id="checking"/>
  <a href="#" onclick="if(validate()) { $(this).closest('form').submit(); } return false;"  id="add_view" ><img src="/submit.png"></a>
</form>

原始答案： 您可能需要点击处理程序中的某些内容更像

if (validate()) { $(this).closest('form').submit(); }

这应该让提交等到警报关闭。如果你希望表单在没有发生复选框的情况下不提交，那么你可以从validate（）返回true / false，同样可以。

在提交之前验证至少检查了一个复选框

2 个答案: