有人能看到这个jquery代码有什么问题吗？我在变量 reqButEmpty 上收到 undefined 错误消息，因此无法正常运行。提前感谢你。
$(document).ready(function(){
$("#btnCatchReqFlds").on('click', function(){
alert('made it to this one also');
var peaches ="hi peaches";
var reqButEmpty = $('fieldset:visible').find('input[class*="-required"]').filter(function()
{
alert(peaches);
alert('second area 1a');
alert(reqButEmpty);
return $.trim($(this).val()) === "";
});
alert('second area 1b');
if(reqButEmpty.length>0)
{
alert("go here ok");
alert(this.length);
reqButEmpty.each(function() {
$('#hldErrMsg').append("Please fill in the " + this.name + "<br />");
});
}
return !reqButEmpty.length;
});
});
html ：
<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>
jquery代码：
<script type="text/javascript">
$(document).ready(function() {
$('fieldset#section-11,fieldset#section-12,fieldset#section-13').hide();
});//end of close all fieldsets
$(document).ready(function() {
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'}
); //end of projType array
$("select#1169").on('change',function () {
var dropDownVal = $(this).val();
var sect_id ="";
$(projType).each(function() {
$(this.sect_id).hide(); //hide all section each time you run thru here
if(this.value == dropDownVal)
{
$(this.sect_id).show();
}
});
});
});
$(document).ready(function(){
$("#btnCatchReqFlds").on('click', function(){
console.log('inside onclick of button');
var peaches ="hi peaches";
var reqButEmpty = $('fieldset:visible').find('input[class*="-required"]').filter(function()
{
console.log(peaches);
console.log('inside var reqButEmpty assignment');
console.log(reqButEmpty);
return $.trim($(this).val()) === "";
});
console.log('just after var reqButEmpty assignment');
if(reqButEmpty.length>0)
{
console.log("inside .length");
console.log(this.length);
reqButEmpty.each(function() {
$('#hldErrMsg').append("Please fill in the " + this.name + "<br />");
});
}
return !reqButEmpty.length;
});
});
</script>
答案 0 :(得分：1)
下面：
$(function () {
var $button = $( '#btnCatchReqFlds' );
var $message = $( '#holdErrMsg' );
$button.on( 'click', function () {
var $reqButEmpty = $( 'input[class*="-required"]', 'fieldset:visible' ).filter(function () {
return $.trim( $( this ).val() ) === '';
});
var html = $reqButEmpty.map(function () {
return 'Please fill in the ' + this.name;
}).get().join( '<br>' );
$message.html( html );
});
});
现场演示： http://jsfiddle.net/jYBPY/3/
顺便说一下，你的代码中有一个拼写错误 - 你写了"#hldErrMsg"而不是"#holdErrMsg"。