0

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

<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>

我确实喜欢，但它似乎对我不起作用，我看到了这条消息，但同时它提交了还不足以验证至少一个复选框被选中？

4

2 回答 2

0

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，并提交无论如何都无效的数据。

于 2013-11-09T22:27:09.193 回答
-1

我在原始答案中建议您需要“类似...”。

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

<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，同样可以。

于 2013-11-09T22:27:32.083 回答