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 验证以确保至少一个单选按钮值为真的主要内容,如果未能解决你的问题,请参考以下文章