Javascript 验证隐藏的多复选框/输入字段
为了处理带有多个可选复选框的字段验证，我使用了webshims polyfill 该表单具有用于隐藏/取消隐藏表单部分的复选框 最初的任务是仅验证/要求隐藏部分（如果它们变得可见） 我最初的想法是使用webshims polyfill的功能，如果选中了与使字段可见相关的复选框，则只需要一个隐藏字段 问题1： 一些隐藏部分包括这些需要验证的多复选框类型字段。如何让这些字段使用webshims的data grouprequired=“”功能，以便验证这些多复选框字段 问题2： 有一个隐藏部分（Registries/id=div3）包含5个输入文本字段-最终用户只需填写其中至少一个字段。如何使此隐藏部分可见时，只需要5个字段中的至少一个字段来验证表单 或者，如果有更好的解决方案，我想学习。我对这个很陌生 以下是表格中的相关代码：Javascript 验证隐藏的多复选框/输入字段,javascript,jquery,forms,validation,checkbox,Javascript,Jquery,Forms,Validation,Checkbox,为了处理带有多个可选复选框的字段验证，我使用了webshims polyfill 该表单具有用于隐藏/取消隐藏表单部分的复选框 最初的任务是仅验证/要求隐藏部分（如果它们变得可见） 我最初的想法是使用webshims polyfill的功能，如果选中了与使字段可见相关的复选框，则只需要一个隐藏字段 问题1： 一些隐藏部分包括这些需要验证的多复选框类型字段。如何让这些字段使用webshims的data grouprequired=“”功能，以便验证这些多复选框字段 问题2： 有一个隐藏部分（Reg
<script>
webshim.setOptions('forms', {
lazyCustomMessages: true,
addValidators: true
});
webshim.polyfill('forms forms-ext');
</script>
<script>
function addTableRow() {
var $tableRow = $('tr.model-row:first-child');
var $clonedRow = $tableRow.clone().show();
$('#stmember').append($clonedRow);
}
function myDeleteFunction() {
var $memberTRs = $('tr', '#stmember');
// If rowcount === 1, hide first row, don't remove it!!
var rowCount = $memberTRs.length;
if (rowCount === 1) {
$('tr.model-row:first-child').hide();
return;
}
$memberTRs.last().remove();
}
jQuery(function() {
$('#delete').click(function() {
myDeleteFunction();
});
$('#add').click(function() {
addTableRow();
});
});
</script>
<script type="text/javascript">
function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
}
</script>
<body>
<form method="post" action="mailto:you@example.com" enctype="text/plain">
<div class="row 50%">
<div class="12u">
Which of the following would you like to do with your specified patient population? Check all that apply.<br />
<ul class="list">
<li><input type="checkbox" id="recruit" name="todo" value="1" data-grouprequired="" onclick="showMe('div1', this)"> Recruitment for research</li>
<li><input type="checkbox" id="edc" name="todo" value="2" onclick="showMe('div2', this)"> Electronic Data Capture</li>
<li><input type="checkbox" id="registry" name="todo" value="3" onclick="showMe('div3', this)"> Registry</li>
<li><input type="checkbox" id="dextract" name="todo" value="4" onclick="showMe('div4', this)"> Data Extraction</li>
<li><input type="checkbox" id="ptpop" name="todo" value="5">Estimate of number of patients in target population</li>
</ul>
</div>
</div>
<div id="div1" style="display:none">
<div class="row 50%">
<div class="12u">
<h3><strong>Recruitment</strong></h3>
What methods would you like to use for patient recruitment? Check all that apply.<br />
<ul class="list">
<li><input type="checkbox" name="vehicle" value="Bike"> Patient Notification Through MyChart</li>
<li><input type="checkbox" name="vehicle" value="Car"> Study Team Member Notification When Appropriate Patient Checks In</li>
<li><input type="checkbox" name="vehicle" value="Car"> Provider Notification During Patient Encounter</li>
</ul>
</div>
</div>
</div>
<div id="div2" style="display:none">
<h3><strong>Electronic Data Capture</strong></h3>
<div class="row 50%">
<div class="6u 12u (mobile)">
How would you like to capture data on your patient population? Check all that apply.<br />
<ul class="list" style="margin-bottom: 0px; padding-bottom: 0px;">
<li><input type="checkbox" name="vehicle" value="Bike"> Patient entry through MyChart</li>
<li><input type="checkbox" name="vehicle" value="Car"> Patient entry through Welcome</li>
<li><input type="checkbox" name="vehicle" value="Car"> Patient entry through REDCap</li>
<li><input type="checkbox" name="vehicle" value="Car"> Clinician entry through EPIC</li>
<li><input type="checkbox" name="vehicle" value="Car"> Clinician entry through REDCap</li>
<li><input type="checkbox" name="vehicle" value="Car"> MHi-GO (Mobile Application)</li>
</ul>
</div>
<div class="6u 12u(mobile)">
Where would you like the data delivered to? (Server name, share name, or JHBox, Enterprise NAS, etc.)
<input name="subname" type="text" data-dependent-validation='{"from": "edc", "prop": "required"}' />
</div>
</div>
<div class="row 50%">
<div class="6u 12u(mobile)">
In what format would you like to receive your data? (Excel, pipe-delimited, CSV, SQL tables)
<input name="subjhed" type="text" data-dependent-validation='{"from": "edc", "prop": "required"}' />
</div>
<div class="6u 12u(mobile)">
Would you like the data visualized and if so how? (Graphs, tables, diagrams, other)
<input name="subemail" type="text" data-dependent-validation='{"from": "edc", "prop": "required"}' />
</div>
</div>
</div>
<div id="div3" style="display:none">
<div class="row 50%">
<h3><strong>Registries</strong></h3>
</div>
<h3 class="quest-header"><strong>What information and/or metrics of your patient population would you like to track over time?</strong></h3>
Please specify if applicable:
<div class="row 50%">
<div class="6u 12u(mobile)">
Diagnoses:
<input name="subjhed" type="text" />
</div>
<div class="6u 12u(mobile)">
Problem List:
<input name="subemail" type="text" />
</div>
</div>
<div class="row 50%">
<div class="6u 12u(mobile)">
Medications:
<input name="subjhed" type="text" />
</div>
<div class="6u 12u(mobile)">
Labs:
<input name="subemail" type="text" />
</div>
</div>
<div class="row 50%">
<div class="6u 12u(mobile)">
Other:
<input name="subjhed" type="text" />
</div>
</div>
</div>
<div id="div4" style="display:none">
<div class="row 50%">
<div class="12u">
<h3><strong>Data Extraction</strong></h3>
What data would you like to extract?
<textarea name="description" data-dependent-validation='{"from": "dextract", "prop": "required"}' ></textarea>
</div>
</div>
<div class="row 50%">
<div class="6u 12u(mobile)">
Where would you like the data delivered to? (Server name, share name, or JHBox, Enterprise NAS, etc.)
<input name="subemail" type="text" data-dependent-validation='{"from": "dextract", "prop": "required"}' />
</div>
<div class="6u 12u(mobile)">
In what format would you like to receive your data? (Excel, pipe-delimited, CSV, SQL tables)
<input name="subjhed" type="text" data-dependent-validation='{"from": "dextract", "prop": "required"}' />
</div>
</div>
</div
<div class="row 50%">
<div class="12u">
<center>
<ul class="actions">
<li><input type="submit" value="Submit Request" /></li>
<li><input type="submit" value="Save & Continue Later" /></li>
<li><input type="reset" value="Clear form" /></li>
</ul>
</center>
</div>
</div>
</form>
webshim.setOptions（'forms'{
懒汉：没错，
addValidators：true
});
polyfill（'forms ext'）；
函数addTableRow（）{
var$tableRow=$（'tr.model-row:first child'）；
var$clonedRow=$tableRow.clone（）.show（）；
$（'#stmember'）.append（$clonedRow）；
}
函数myDeleteFunction（）{
var$memberTRs=$（'tr'，'stmember'）；
//如果rowcount==1，隐藏第一行，不要删除它！！
var rowCount=$memberTRs.length；
如果（行计数===1）{
$（'tr.model-row:first child'）.hide（）；
返回；
}
$memberTRs.last（）.remove（）；
}
jQuery（函数（）{
$（“#删除”）。单击（函数（）{
myDeleteFunction（）；
});
$（'#添加'）。单击（函数（）{
addTableRow（）；
});
});
函数showMe（it、box）{
var vis=（复选框）？“块”：“无”；
document.getElementById（it.style.display=vis）；
}
您希望对指定的患者群体执行以下哪项操作？勾选所有适用项。
- 招聘研究人员
- 电子数据采集
- 登记处
- 数据提取
- 估计目标人群中的患者人数
招聘
您希望使用什么方法招募患者？勾选所有适用项。
- 通过MyChart通知患者
- 适当的患者入住时，研究团队成员通知
- 患者会面期间的提供者通知
电子数据采集
您希望如何获取患者群体的数据？勾选所有适用项。
通过MyChart输入患者
- 欢迎病人入场
- 通过REDCap进入患者
- 通过EPIC输入临床医生
- 临床医生通过REDCap进入
- MHi GO（移动应用程序）
您希望将数据传送到哪里？（服务器名称、共享名称或JHBox、企业NAS等）
您希望以何种格式接收数据？（Excel、管道分隔、CSV、SQL表格）
您希望数据可视化吗？如果是，如何可视化？（图表、表格、图表、其他）
注册表
随着时间的推移，您希望跟踪患者群体的哪些信息和/或指标？
如适用，请说明：
诊断：
问题列表：
药物：
实验室：
其他：
数据提取
您希望提取哪些数据？
您希望将数据传送到哪里？（服务器名称、共享名称或JHBox、企业NAS等）
您希望以何种格式接收数据？（Excel、管道分隔、CSV、SQL表格）
最终我自己解决了这个问题。禁用所有隐藏字段。如果它们在变得可见时启用。对于多个文本字段，可以使用webshims polyfill中的数据grouprequired，但必须创建自定义错误消息