jQuery 验证以确保至少一个单选按钮值为真

Posted

技术标签:

【中文标题】jQuery 验证以确保至少一个单选按钮值为真【英文标题】:jQuery validation to ensure that at least one radiobutton value is true 【发布时间】:2017-10-16 08:16:40 【问题描述】:

我的表格有两个问题。第一个问题询问产品价值是否大于固定的一定金额,第二个问题询问产品价值是否小于固定金额。当用户尝试提交表单时,应验证表单以确认至少一个问题已被回答为是。如果两个问题都回答为否,则表单有效属性$("#form").valid() 应为 false,并且页面上应显示包含错误消息的 div。如何使用 jQuery 验证来实现这一点?

表单的简化版本看起来像

<form id="billing" method="POST">
    <div>
        <label for "billAmountLess">Value is less than 1000</label>
        <input id="billAmountLessY" name="billAmountLess" type="radio" required value="True">
        <label for "billAmountLessY">Yes</label>
        <input id="billAmountLessN" name="billAmountLess" type="radio" required value="False">
        <label for "billAmountLessN">No</label>
    </div>
    <div>
        <label for "billAmountMore">Value exceeds 1000</label>
        <input id="billAmountMoreY" name="billAmountMore" type="radio" required value="True">
        <label for "billAmountMoreY">Yes</label>
        <input id="billAmountMoreN" name="billAmountMore" type="radio" required value="False">
        <label for "billAmountMoreN">No</label>
    </div>
    <div id="errorDiv" style="display:none">Error!!!!
    </div>
    <div>
        <input type="submit" value="Submit">
    </div>
</form>

我正在尝试的 jQuery 验证是

$('#billing').validate(
    rules: 
        billAmountMore: 
            equalTo: 
                param: '#billAmountMoreY',
                depends: function(element) 
                    $("errorDiv").show();
                    return $("#input[name='billAmountLess']:checked").val() == "false"; 
                
            
        
    
);

我为此创建了一个jsfiddle。

【问题讨论】:

为什么你必须创建两个问题,每个问题都有两个选项,而且所有这些都是相关的?我只想放一个复选框,指示它是否超过 1000。这背后有什么技术原因吗? 我同意在这种情况下它没有多大意义。我在这里简化了问题。但是根据我们的要求,我们确实需要两组问题。就像,用户可以拥有超过限制的东西或低于限制的东西,或者满足这两个标准的多个东西。但用户不能同时选择。我们在后端检查它以执行一些操作。 【参考方案1】:

您可以使用此代码

    function validate()
        console.log($("input[name='billAmountLess']:checked").val());
        console.log($("input[name='billAmountMore']:checked").val());
    

检索单选按钮值。

在你的代码中这一行:

return $("#input[name='billAmountLess']:checked").val() == "false"; 

应该删除“输入”之前的“#”,因为它表示元素的“id”。也许这就是它不起作用的原因。

【讨论】:

【参考方案2】:

很简单,您可以在自定义验证功能中执行此操作。更新您的表单标签 -

<form id="billing" onsubmit="return validate();" method="POST">

那么——

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
  function validate()
    var billLess = $("input[name='billAmountLess']:checked").val();
    var billMore = $("input[name='billAmountMore']:checked").val();
    if(billLess == "False" && billMore == "False")
      $("#errorDiv").show();
      return false;
    
    else
      return true;
    
  
</script>

【讨论】:

以上是关于jQuery 验证以确保至少一个单选按钮值为真的主要内容,如果未能解决你的问题,请参考以下文章

jQuery确定在一个单选组中是否至少选中了一个单选按钮

验证单选按钮被选中

使用 jQuery 验证插件验证单选按钮组

验证动态单选按钮jQuery

jQuery 验证 - 使用自定义单选按钮(打开/关闭)

单选按钮验证不起作用 jquery