在具有两种形式的页面上包含复选框验证器

Posted 2023-05-09

【中文标题】在具有两种形式的页面上包含复选框验证器

【英文标题】：Include checkbox validator on page with two forms

【发布时间】：2017-03-29 08:07:17

【问题描述】：

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

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

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

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

我也在使用 Foundation 6 框架，考虑使用 abide，但我不知道如何验证是否为两个提交按钮都选中了复选框。

任何帮助表示赞赏。

【问题讨论】：

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

【参考方案1】：

覆盖默认的表单提交，勾选复选框，然后提交表单。

示例代码：

$(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() 代替 $("#terms:checked").length.

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

【参考方案2】：

如果您不使用外部库进行验证，则可以轻松执行以下操作：

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

【参考方案3】：

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

当然可以。检查术语输入checked 属性，如果不是checked，则检查return 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;
  
);

JSFiddle

---

关于嵌套表单

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

你完全正确。

来自 html5 工作草案：

4.10.3 form 元素

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

Answer from here

【参考方案4】：

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

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

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