在页面上包含两个表单的复选框验证程序

Question

我有一个付款页面。在页面的顶部，我有一个标准的div和一些＆＃34;请确认你同意T＆amp; S＆amp; C＆＃39; S＆＃34;文字和复选框。

下面有两个单独的表格，每个表格都有不同的付款选项/按钮＆＃34;支票付款＆＃34;并且＆＃34;用卡支付＆＃34;。

是否可以验证两个表单提交按钮上的复选框，因为用户可以选择付款选项？

注意：div不在两种形式之内。我不认为嵌套表格是严格合法的。

我也在使用Foundation 6 Framework，考虑使用abide，但我仍然坚持如何验证是否选中了两个提交按钮的复选框。

任何帮助表示感谢。

Answer 1

如果您没有使用外部库进行验证，则可以轻松完成下一步：

<input type="submit" value="Pay" onclick="return checkIfAgreed();">
<script>
    function checkIfAgreed() {
         // get the check box dom and make sure it's checked
         // then return true if OK or false if not;
    }
</script>

Answer 2

关于验证多个表单上的复选框

当然可以。检查术语输入 <meta name="viewport" content="width=device-width, initial-scale=0.1, minimum-scale=0, maximum-scale=10.0, user-scalable=1" /> 属性，如果不是checked，则checked检查表单提交事件。

return false

JSFiddle

关于嵌套表单

  

注意：我不认为嵌套表格是严格合法的。

你说得对。

来自html5工作草案：

  

4.10.3 // The name of your Terms input var $terms = $('[name="terms"]'); $('form').submit(function(){ if ( !$terms.prop('checked') ) { console.log('Terms not checked'); return false; } }); 元素

     

内容模型：
  流内容，但 没有表单元素后代 。

Answer from here

Answer 3

覆盖默认的表单提交，检查复选框是否已选中，然后提交表单。

示例代码：

$(function(){
  $("#form1, #form2").on('submit', function(){
    if($("#terms:checked").length) {
      $(this).submit(); //if checked, submit form
    }
    else {
      alert('Please accept the terms'); //else show form errors
    }
    return false;
  });
});

如果您使用jQuery验证插件，您可以使用$（＆＃34;＃terms＆＃34;）。valid（）而不是 $（＆＃34; #terms：检查＆＃34）。长度

以下是我为您创建的一个简单示例：fiddle

Answer 4

谢谢大家的快速回复。在阅读了所有人的回答并审核了类似的复选框验证解决方案之后，我还发现以下工作： 不确定哪种解决方案最好......但是，嘿，他们的工作！谢谢大家： - ）

＆＃13;

＆＃13;

    	function checkIfAgreed() {
    		if (!document.getElementById('agreeTerms').checked){
    			alert('Please confirm you have read and understood the acceptance conditions');
    		return false;}
    }

＆＃13;

    <input type="checkbox" id="agreeTerms">
    
    <form>
      <input type="submit" value="Option 1" onclick="return checkIfAgreed();">
    </form>
    
    <form>
      <input type="submit" value="Option 2" onclick="return checkIfAgreed();">
    </form>
    

＆＃13;

＆＃13;

＆＃13;