jquery - check for required but empty checkbox, multiselect, radio and drop field
<p>With the help of the stackoverflowers, I got this piece of code working within my sample app, but someone in the forum pointed out that I will need more code to validate a checkbox, radio, multiselect and dropdown.  Right now, this works to validate an empty text field.</p>

<p>I'm think if I do a find for the types of the required fields might work, but I have no idea how to incorporate this or if it would even work.  Could someone provide assistance please/</p>

<p><strong>my jsfiddle</strong>>> <a href="http://jsfiddle.net/justmelat/kBDNt/" rel="nofollow">http://jsfiddle.net/justmelat/kBDNt/</a></p>

<p><strong>my html code</strong>>></p>

<pre><code>&lt;form method="post" action=""&gt;
    &lt;div id="holdErrMsg"&gt;&lt;/div&gt;
    &lt;fieldset id="mainSection" name="mainSection"&gt;
                &lt;legend style="color:blue; font-weight:bold"&gt;Project Overview Section&lt;/legend&gt;

                &lt;table style="width: 100%"&gt;
                    &lt;tr&gt;
                        &lt;td style="height: 33px; width: 178px;"&gt;Name&lt;/td&gt;
                        &lt;td style="height: 33px"&gt;&lt;input  id="1125" name="1125" class="1125-required" type="text" /&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td style="height: 33px; width: 178px;"&gt;Email&lt;/td&gt;
                        &lt;td style="height: 33px"&gt;&lt;input id="1026" name="1026" class="1026-required" type="text" /&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td style="width: 178px"&gt;Product Title&lt;/td&gt;
                        &lt;td&gt;&lt;input  id="1089" name="1089" type="text" /&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td style="width: 178px"&gt;Product Type&lt;/td&gt;
                        &lt;td&gt;&lt;select id="1169" name="1169"&gt;
                        &lt;option value=""&gt;Select&lt;/option&gt;
                        &lt;option value="Cars"&gt;Cars&lt;/option&gt;
                        &lt;option value="Boats"&gt;Boats&lt;/option&gt;
                        &lt;option value="Planes"&gt;Planes&lt;/option&gt;
                        &lt;/select&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                                        &lt;tr&gt;&lt;td&gt;
                                        &lt;button id="btnCatchReqFlds" type="button" name="btn"&gt;Check Required Fields&lt;/button&gt;
                                        &lt;/td&gt;&lt;/tr&gt;
                                    &lt;/table&gt;
            &lt;/fieldset&gt;

            &lt;fieldset id="section-11" name="section-11"&gt;
                &lt;legend style="color:fuchsia; font-weight:bold"&gt;Car Details Section&lt;/legend&gt;

                &lt;table cellpadding="2" style="width: 100%"&gt;
                    &lt;tr&gt;
                        &lt;td style="width: 334px; height: 35px"&gt;&lt;label&gt;Size:*&lt;/label&gt;&lt;/td&gt;
                        &lt;td style="height: 35px"&gt;&lt;input id="1245" class="1245-required" name="1245" type="text" /&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td style="height: 35px; width: 334px"&gt;Color:*&lt;/td&gt;
                        &lt;td style="height: 35px"&gt;
                        &lt;select id="1433" class="1433-required" name="1433"&gt;
                &lt;option value="Orange"&gt;Orange&lt;/option&gt;
                        &lt;option value="Blank"&gt;Blank&lt;/option&gt;
                        &lt;option value="Green"&gt;Green&lt;/option&gt;
            &lt;/select&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td style="width: 334px"&gt;Description:&lt;/td&gt;
                        &lt;td&gt;
                        &lt;textarea id="1290" name="1290" rows="2" style="width: 433px"&gt;&lt;/textarea&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                &lt;/table&gt;
                            &lt;/fieldset&gt;

            &lt;fieldset id="section-12" name="section-12"&gt;
                &lt;legend style="color:fuchsia; font-weight:bold"&gt;Plane Details Section&lt;/legend&gt;

                &lt;table cellpadding="2" style="width: 100%"&gt;
                    &lt;tr&gt;
                        &lt;td style="width: 334px; height: 35px"&gt;&lt;label&gt;Size:&lt;/label&gt;&lt;/td&gt;
                        &lt;td style="height: 35px"&gt;&lt;input id="1245" name="1245" type="text" /&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td style="height: 35px; width: 334px"&gt;Color*:&lt;/td&gt;
                        &lt;td style="height: 35px"&gt;
                                                &lt;input type="checkbox" name="1433[]" id="1433[]" value"Orange" class="1433[]-required"/&gt;Orange
                                                &lt;input type="checkbox" name="1433[]" id="1433[]" value"Blue" class="1433[]-required"/&gt;Blue
                                                &lt;input type="checkbox" name="1433[]" id="1433[]" value"Green" class="1433[]-required"/&gt;Green
                        &lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td style="width: 334px"&gt;Description:&lt;/td&gt;
                        &lt;td&gt;
                        &lt;textarea id="1290" name="1290" rows="2" style="width: 433px"&gt;&lt;/textarea&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                &lt;/table&gt;
                            &lt;/fieldset&gt;
            &lt;fieldset id="section-13" name="section-13"&gt;
                &lt;legend style="color:fuchsia; font-weight:bold"&gt;Boat Details Section&lt;/legend&gt;

                &lt;table cellpadding="2" style="width: 100%"&gt;
                    &lt;tr&gt;
                        &lt;td style="width: 334px; height: 35px"&gt;&lt;label&gt;Size:&lt;/label&gt;&lt;/td&gt;
                        &lt;td style="height: 35px"&gt;&lt;input id="1245" name="1245" type="text" /&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td style="height: 35px; width: 334px"&gt;Color:*&lt;/td&gt;
                        &lt;td style="height: 35px"&gt;
                                                &lt;input type="radio" name="1834" id="1834" value="None" class="valuetext" class="1834-required"&gt;None
                                                &lt;input type="radio" name="1834" id="1834" value="All" class="valuetext" class="1834-required"&gt;All
                       &lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td style="width: 334px"&gt;Description:&lt;/td&gt;
                        &lt;td&gt;
                        &lt;textarea id="1290" name="1290" rows="2" style="width: 433px"&gt;&lt;/textarea&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                &lt;/table&gt;
                            &lt;/fieldset&gt;&lt;br&gt;
&lt;fieldset id="section-1011" name="section-1011"&gt;
                &lt;legend style="color:green; font-weight:bold"&gt;Misc Info Section&lt;/legend&gt;

                &lt;table cellpadding="2" style="width: 100%"&gt;
                    &lt;tr&gt;
                        &lt;td style="width: 334px; height: 35px"&gt;&lt;label&gt;Size:&lt;/label&gt;&lt;/td&gt;
                        &lt;td style="height: 35px"&gt;&lt;input id="1301" name="1301" type="text" /&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td style="height: 35px; width: 334px"&gt;Color:&lt;/td&gt;
                        &lt;td style="height: 35px"&gt;
                        &lt;select id="1302" name="1302"&gt;
                &lt;option value="Orange"&gt;Orange&lt;/option&gt;
                        &lt;option value="Blank"&gt;Blank&lt;/option&gt;
                        &lt;option value="Green"&gt;Green&lt;/option&gt;
            &lt;/select&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td style="width: 334px"&gt;Description:&lt;/td&gt;
                        &lt;td&gt;
                        &lt;textarea id="1303" name="1303" rows="2" style="width: 433px"&gt;&lt;/textarea&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                &lt;/table&gt;
                            &lt;/fieldset&gt;


&lt;/form&gt;​
</code></pre>

<p><strong>my jquery code</strong>>></p>

<pre><code>$("#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 + "&lt;br /&gt;");
        });
    }
    return !requiredButEmpty.length;
});
​
</code></pre>
