使用单选按钮显示/隐藏div+；使用jqueryvalidation.org进行验证

我试图显示/隐藏一个div，然后在显示的div中进行验证，而不是验证隐藏的div

• 如果在收音机中选择了

  Yes

  ，则显示div

  id=“row\u id\u number”

  &validate
• 如果在收音机

  id\u question

  中选择了

  No

  ，则显示div

  id=“row\u contact\u method”

  &validate

$（）.ready（函数（））{
$（“#id_frm”）。验证({
规则：{
“身份证问题”：{
必填项：true
},
“身份证号码”：{
要求：正确，
最小长度：10，
最小长度：10
},
“联系方式”：{
必填项：true
}
},
信息：{
“身份证问题”：{
必填：“请选择您是否有ID。”
},
“身份证号码”：{
必填：“请输入ID。”
},
“联系方式”：{
必填：“请选择一种联系方式。”
}               
},
});
});
.错误{
颜色：#F00；
}
你有身份证吗？
对
否




输入身份证号码





首选接触方法

电子邮件
电话
邮政

默认情况下，jQuery验证插件将忽略隐藏字段（不验证隐藏的任何内容），因此只需显示/隐藏

div

元素，并让验证自动进行。（无需对验证规则进行任何修改即可实现此目的。）

由于您从未说过表单最初加载时应该是什么样子，因此我将两行都隐藏起来，直到选中收音机。您可以根据需要轻松更改CSS

<div id="row_id_number" style="display:none"> .... </div>

或者

---

您还意外地列出了相同的规则两次

"id_number": {
    required: true,
    minlength: 10,
    minlength: 10 // <- same rule listed twice
},

“身份证号码”：{
要求：正确，
最小长度：10，
minlength:10/
$（）。ready
与
$不同。ready
jQuery Validate会自动忽略隐藏字段，因此您根本不需要更改规则。只需根据单选按钮显示/隐藏行，即可根据显示内容自动进行正确的验证。
<div id="row_id_number" style="display:none"> .... </div>

<div id="row_contact_method" style="display:none"> .... </div>

$().ready(function() { ....  // <- not recommended

$(document).ready(function () { ....

$(function() { ....

"id_number": {
    required: true,
    minlength: 10,
    minlength: 10 // <- same rule listed twice
},