单选组和文本输入选项的 JQuery 验证

Question

我正在尝试使用以下逻辑对下面的单选按钮组使用 jquery 验证：
- 如果选中第一个或第二个单选按钮，则该组有效
- 如果选中第三个单选按钮，则必须填充文本输入才能使该组有效

<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="form-group">
<label class="control-label col-lg-12 col-md-12 col-sm-12">Please state your marital status</label>
<div class="col-lg-12 col-md-12 col-sm-12" id="q02div" name="q02div">
<label class="mt-radio mt-radio-outline col-lg-4 col-md-4 col-sm-4"> a) Not Married
<input type="radio" value="q2r1" id="q2r1" name="q02" />
<span></span>
</label>
<label class="mt-radio mt-radio-outline col-lg-4 col-md-4 col-sm-4"> b) Married
<input type="radio" value="q2r2" id="q2r2" name="q02" />
<span></span>
</label>
<label class="mt-radio mt-radio-outline col-lg-4 col-md-4 col-sm-4"> c) Other (please specify)
<input type="radio" value="q2r3" id="q2r3" name="q02" />
<span></span>
</label>
<div class="col-lg-4 col-md-4 col-sm-4">
<input type="text" class="form-control" placeholder="Other marital status" value="" name="q2r4" id="q2r4" maxlength="100" disabled="disabled">
</div>
</div>
</div>
</div>
</div>

我添加了以下规则：

rules {
q02: {
required: function(element){
return($("#q2r4").val()=="");
}
},
q2r4: {
required: "#q2r3:checked"
}
}

但是，无论选中哪个按钮以及是否填充文本输入，都会验证该组。 这可以通过规则完成还是我必须编写一些额外的函数？我已经改变了几次规则，但没有运气。我做错了什么？

Answer 1

你试过这个吗？

rules {
q02: {
required: true
},
q2r4: {
required: "#q2r3:checked"
}
}

第一条规则使单选组成为必需的。 必须选择 1、2 或 3。

第二条规则仅在选中 3 时才使文本字段成为必填字段。

没有理由查看文本字段的状态并有条件地使单选按钮成为必需的。 始终需要三个单选按钮之一。

如果您担心将选择 1 或 2并且文本框仍然会填写，则可以使用 JavaScript 在选择 1 或 2 时隐藏文本框，或者在用户键入框中时自动选择 3。