Jquery-验证可见字段集中的单选表单字段类型？
下面的代码将验证当前可见字段集中的必填字段，但仅当这些字段是文本框时 如何合并代码来验证单选按钮字段 我的JSFIDLE>> 我的html:>> 我的jquery代码：>>Jquery-验证可见字段集中的单选表单字段类型？,jquery,validation,Jquery,Validation,下面的代码将验证当前可见字段集中的必填字段，但仅当这些字段是文本框时 如何合并代码来验证单选按钮字段 我的JSFIDLE>> 我的html:>> 我的jquery代码：>> 您不检查单选按钮值是否为空，而是检查用户是否已对其进行了检查。如果选中了同一组中的任何一个单选按钮，则还需要选中该组中具有相同名称的所有单选按钮。在本例中，我对列表进行预筛选，以避免每个所需单选按钮出现重复的错误消息 $btnCatchReqFlds。单击，函数{ $holderrmg.empty； var distinc
您不检查单选按钮值是否为空，而是检查用户是否已对其进行了检查。如果选中了同一组中的任何一个单选按钮，则还需要选中该组中具有相同名称的所有单选按钮。在本例中，我对列表进行预筛选，以避免每个所需单选按钮出现重复的错误消息 $btnCatchReqFlds。单击，函数{ $holderrmg.empty； var distinctRadiobuttonGroups=[]； var requiredButEmpty=$fieldset:可见。查找“输入[class*=-required]，选择[class*=-required]”。filterfunctionindex{ //预筛选，每个单选按钮组仅保留一个单选按钮 var$this=$this； 如果这美元是：收音机{ var name=$this.attrname； 如果distinctRadiobuttonGroups[名称]{ //非唯一，过滤掉 返回false； } distinctRadiobuttonGroups[name]=true； 返回true； } //保留所有非单选按钮 返回true； }.filterfunction{ var$this=$this； 如果$this.is:复选框{ //必须选中必需的复选框 返回！$this.is：已选中； }否则，如果这美元是：收音机{ var foundCheckedRadio=false， radioButtonGroupSelector=：radio[name=+$this.attrname+]； $this.parentsform.findradioButtonGroupSelector.eachfunction{ //检查此单选按钮是否已选中 //可以优化为在找到第一个选中单选按钮时返回 foundCheckedRadio=foundCheckedRadio | |$this.is:checked； }; //检查同一组中的所有单选按钮后的结果 返回！foundCheckedRadio； }否则{ //一切都不是复选框或单选按钮 返回$.trim$this.val==； } }; 如果需要，但为空。长度{ requiredButEmpty.eachfunction{ $HOLDERRMG.APPENDER请填写+this.name+； }; } return！requiredButEmpty.length； }; 提供的HTML也存在一些问题；例如，不同元素的重复ID和复选框值的输入不允许且缺少=字符 普通复选框更容易，除非您有一些逻辑，至少必须选中其中一个复选框。我的修复没有考虑到这一点，这就是为什么您将收到三条飞机验证错误消息的原因
<form method="post" action="">
<div id="holdErrMsg"></div>
<fieldset id="mainSection" name="mainSection">
<legend style="color:blue; font-weight:bold">Project Overview Section</legend>
<table style="width: 100%">
<tr>
<td style="height: 33px; width: 178px;">Name</td>
<td style="height: 33px"><input id="1125" name="1125" class="1125-required" type="text" /></td>
</tr>
<tr>
<td style="height: 33px; width: 178px;">Email</td>
<td style="height: 33px"><input id="1026" name="1026" class="1026-required" type="text" /></td>
</tr>
<tr>
<td style="width: 178px">Product Title</td>
<td><input id="1089" name="1089" type="text" /></td>
</tr>
<tr>
<td style="width: 178px">Product Type</td>
<td>
<select id="1169" name="1169">
<option value="">Select</option>
<option value="Cars">Cars</option>
<option value="Boats">Boats</option>
<option value="Planes">Planes</option>
</select>
</td>
</tr>
<tr>
<td>
<button id="btnCatchReqFlds" type="button" name="btn">Check Required Fields</button>
</td>
</tr>
</table>
</fieldset>
<fieldset id="section-11" name="section-11">
<legend style="color:fuchsia; font-weight:bold">Car Details Section</legend>
<table cellpadding="2" style="width: 100%">
<tr>
<td style="width: 334px; height: 35px"><label>Size:*</label></td>
<td style="height: 35px"><input id="1245" class="1245-required" name="1245" type="text" /></td>
</tr>
<tr>
<td style="height: 35px; width: 334px">Color:*</td>
<td style="height: 35px">
<select id="1433" class="1433-required" name="1433">
<option value="Orange">Orange</option>
<option value="Blank">Blank</option>
<option value="Green">Green</option>
</select>
</td>
</tr>
<tr>
<td style="width: 334px">Description:</td>
<td>
<textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea>
</td>
</tr>
</table>
</fieldset>
<fieldset id="section-12" name="section-12">
<legend style="color:fuchsia; font-weight:bold">Plane Details Section</legend>
<table cellpadding="2" style="width: 100%">
<tr>
<td style="width: 334px; height: 35px"><label>Size:</label></td>
<td style="height: 35px"><input id="1245" name="1245" type="text" /></td>
</tr>
<tr>
<td style="height: 35px; width: 334px">Color*:</td>
<td style="height: 35px">
<input type="checkbox" name="1433[]" id="1433[]" value"Orange" class="1433[]-required"/>Orange
<input type="checkbox" name="1433[]" id="1433[]" value"Blue" class="1433[]-required"/>Blue
<input type="checkbox" name="1433[]" id="1433[]" value"Green" class="1433[]-required"/>Green
</td>
</tr>
<tr>
<td style="width: 334px">Description:</td>
<td>
<textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea>
</td>
</tr>
</table>
</fieldset>
<fieldset id="section-13" name="section-13">
<legend style="color:fuchsia; font-weight:bold">Boat Details Section</legend>
<table cellpadding="2" style="width: 100%">
<tr>
<td style="width: 334px; height: 35px"><label>Size:</label></td>
<td style="height: 35px"><input id="1245" name="1245" type="text" /></td>
</tr>
<tr>
<td style="height: 35px; width: 334px">Color:*</td>
<td style="height: 35px">
<input type="radio" name="1834" id="1834" value="None" class="valuetext" class="1834-required">None
<input type="radio" name="1834" id="1834" value="All" class="valuetext" class="1834-required">All
</td>
</tr>
<tr>
<td style="width: 334px">Description:</td>
<td>
<textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea>
</td>
</tr>
</table>
</fieldset>
<br>
<fieldset id="section-1011" name="section-1011">
<legend style="color:green; font-weight:bold">Misc Info Section</legend>
<table cellpadding="2" style="width: 100%">
<tr>
<td style="width: 334px; height: 35px"><label>Size:</label></td>
<td style="height: 35px"><input id="1301" name="1301" type="text" /></td>
</tr>
<tr>
<td style="height: 35px; width: 334px">Color:</td>
<td style="height: 35px">
<select id="1302" name="1302">
<option value="Orange">Orange</option>
<option value="Blank">Blank</option>
<option value="Green">Green</option>
</select>
</td>
</tr>
<tr>
<td style="width: 334px">Description:</td>
<td>
<textarea id="1303" name="1303" rows="2" style="width: 433px"></textarea>
</td>
</tr>
</table>
</fieldset>
</form>
$("#section-11,#section-12,#section-13,#section-1011").hide();
var projtype = new Array(
{value : 'Cars', sect_id : 'fieldset#section-11'},
{value : 'Planes', sect_id : 'fieldset#section-12'},
{value : 'Boats', sect_id : 'fieldset#section-13'}
);
$("select#1169").on('change',function () {
var thisVal = $(this).val();
var sect_id ="";
//$('fieldset[id!="mainSection"]').hide();
$(projtype).each(function() {
$(this.sect_id).hide();
if(this.value == thisVal) {
$(this.sect_id).show();
}
});
});
$("#btnCatchReqFlds").on('click', function() {
$("#holdErrMsg").empty();
var requiredButEmpty = $("fieldset:visible").find('input[class*="-required"], select[class*="-required"]').filter(function() {
return $.trim($(this).val()) === "";
});
if (requiredButEmpty.length) {
requiredButEmpty.each(function () {
$("#holdErrMsg").append("Please fill in the " + this.name + "<br />");
});
}
return !requiredButEmpty.length;
});