Javascript 在带有两个表单的页面上包含复选框验证器

我有一个付款页。在页面顶部，我有一个标准的div，上面有一些“请确认您同意T&C”文本和一个复选框

下面是两个单独的表格，每个表格都有不同的付款选项/按钮“支票付款”和“刷卡付款”

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

注：div不在这两种形式的范围内。我不认为嵌套表单是严格合法的

我也使用基础6框架，考虑使用Lead，但是我被困在如何验证复选框是否针对两个提交按钮进行检查。

谢谢你的帮助

---

如果您不使用外部库进行验证，则很容易执行下一步操作：

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

函数CHECKIFAGRED（）{
//获取复选框dom并确保选中它
//如果确定，则返回true；如果不确定，则返回false；
}

如果您不使用外部库进行验证，则很容易执行下一步操作：

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

函数CHECKIFAGRED（）{
//获取复选框dom并确保选中它
//如果确定，则返回true；如果不确定，则返回false；
}

关于验证多个表单上的复选框 当然可以。检查术语输入

checked

属性，如果未检查

checked

，

将false返回表单提交事件

// The name of your Terms input
var $terms = $('[name="terms"]');

$('form').submit(function(){
  if ( !$terms.prop('checked') ) {
    console.log('Terms not checked');
    return false;
  }
});



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

你完全正确

从html5工作草案中：

4.10.3<代码>表单

元素 内容模型：
流动内容，但没有表单元素子体

关于验证多个表单上的复选框 当然可以。检查术语输入

checked

属性，如果未检查

checked

，

将false返回表单提交事件

// The name of your Terms input
var $terms = $('[name="terms"]');

$('form').submit(function(){
  if ( !$terms.prop('checked') ) {
    console.log('Terms not checked');
    return false;
  }
});



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

你完全正确

从html5工作草案中：

4.10.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验证插件，则可以使用$（“#terms”）.valid（）而不是 $（“#术语：选中”）。长度

---

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

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

示例代码：

$(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验证插件，则可以使用$（“#terms”）.valid（）而不是 $（“#术语：选中”）。长度

---

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

感谢大家的快速回复。在阅读了每个人的答案并回顾了类似的复选框验证解决方案后，我还发现以下方法可行： 不确定什么解决方案是最好的。。。但是，嘿，他们工作！谢谢大家：-）

函数checkIfa贪婪（）{
如果（！document.getElementById（'agreeTerms'）。选中）{
警告（“请确认您已阅读并理解验收条件”）；
返回false；}
}

---

感谢大家的快速回复。在阅读了每个人的答案并回顾了类似的复选框验证解决方案后，我还发现以下方法可行： 不确定什么解决方案是最好的。。。但是，嘿，他们工作！谢谢大家：-）

函数checkIfa贪婪（）{
如果（！document.getElementById（'agreeTerms'）。选中）{
警告（“请确认您已阅读并理解验收条件”）；
返回false；}
}

将onsubmit绑定到表单1和表单2，检查是否在表单3中选中复选框。将onsubmit绑定到表单1和表单2，检查是否在表单3中选中复选框。