Question

我的表格有两个问题。第一个问题询问产品价值是否大于固定的特定金额，第二个问题询问产品价值是否小于固定金额。当用户尝试提交表单时，应验证表单以确认至少有一个问题已被回答为是。如果两个问题的答案都是“否”，则表单有效属性$("#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。

Answer 1

您可以使用此代码

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

检索单选按钮值。

在你的代码中这一行：

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

应该在'input'之前删除“＃”，因为它表示元素的“id”。也许这就是为什么它不起作用。

Answer 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验证以确保至少有一个radiobutton值为true

2 个答案: