Question

Can anyone see what is wrong with this bit of jquery code? I get an undefined error message on the variable reqButEmpty and consequently it does not run correctly. THank you in advance.

$(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;
                });
        });

The 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 code:

<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>

Answer 1

Here:

$(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 );
    });
});

Live demo: http://jsfiddle.net/jYBPY/3/

Btw, you had a typo in your code – you wrote "#hldErrMsg" instead of "#holdErrMsg".