I want to find all the required fields on my form that are within a fieldset that is currently visible. I will actually use this code when the user submits the form, but for testing I am using a simple button to check for visible fieldset, then for the fields within those visible fieldset that are required [noted by the class name ending with -required]. These fields can be textboxes, radios, checkboxes, etc. Then determine if they are empty. If empty provide message in my div telling user which fields are not complete.
I thought I had this code figured out with help from another stackOverflower, but it just does not work in my code. Could anyone provide some insight please?
my fiddle here: http://jsfiddle.net/justmelat/jVktq/
My html here:
<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" type="text" /></td>
</tr>
<tr>
<td style="height: 33px; width: 178px;">Email</td>
<td style="height: 33px"><input id="1026" name="1026" 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>
my jquery here:
$("#section-11").hide();
$("#section-12").hide();
$("#section-13").hide();
$("#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() {
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;
});
First off, you have a typo.
needs to be
Also, you can’t really use that one function to check checkboxes and radio buttons because these you would need to see if they are checked or selected. Checking the value of these would not work.