How do I create this hide/show, validation functioning using Jquery?
<p>We've inherited app.  written in php/codeIgniter. since this is a prod app, I can't give the url or show the real code, but have included the html [scroll to bottom].  I tried to capture all the main parts.  [Fiddle was not working properly for some reason, html is also here: http://jsfiddle.net/justmelat/CtVpu/].</p>

<p>The app is an autogenerated web form that the client controls mostly.  We have a hide/show feature that we implement using JS, so based on a field [usually project type dropdown] a section/fieldset will display and others will hide. [<strong>Run example html]</strong>.</p>

<p>CI has some built-in validation features, so we capture in the db if the field is required [on/off flag], if required, CI will not allow user to submit form.  This works fine, <strong>except when clients have the hide/display</strong> feature, some of the fieldsets may have required fields within them, if the fs is hidden, u of course can't get to it to do anything, so right now, we tell clients they can't have "required" fields in hidden sections.</p>

<p>I'm new to both json &amp; jquery, but I got json, so it will out all the requireds in the array results below:</p>

<pre><code>{[&lt;br&gt;&lt;br&gt;Required Fields:  {"conn_id":null,"result_id":null,"result_array":[{"account_id":"3","display_name":"Project Requested By","section_id":"11","id":"15"},{"account_id":"3","display_name":"Requestor Email","section_id":"11","id":"16"},{"account_id":"3","display_name":"Project Title","section_id":"12","id":"18"},{"account_id":"3","display_name":"Project Type","section_id":"12","id":"19"},{"account_id":"3","display_name":"Client","section_id":"11","id":"2075"}],"result_object":[],"current_row":0,"num_rows":5,"row_data":null}]
</code></pre>

<p>So here's I am trying for in a nutshell: using jquery - though it's confusing me now, I really like it. [#1 below is already done]</p>

<ol>
<li>User pre-selects which fields are required, value of required field stored in db
the above results gathered via <code>[var reqdFlds = &lt;?php echo "new Array(". trim(json_encode($requiredFieldsArray), '[]').")"; ?&gt;;]</code>
above qry results are displayed in php page</li>
<li>when user submits job, validation catches <strong>everything "required" that's in the "Project Overview Section"</strong> static/always displayed section, in this example will be <strong>Name</strong> and <strong>Email</strong></li>
<li>then if the <strong>product type selected is Cars</strong>, the validation will <strong>only</strong> halt submission of the form if the "Size" field <strong>within the Car Details Section</strong> is emptyList item</li>
<li>The validation will <strong>ignore "required" size fields for Boats and Planes</strong> because they are not the product type selected.</li>
</ol>

<p><strong>Could some give me detail help on how to set this up?  After I hit 52 lines of jquery code, I knew I was not doing this correctly.</strong></p>

<p><strong>Note</strong>:  I know several may comment on the use of numbers for the id values, that's the way we got the app, so we are stuck with it for now.  The html code is brief example of the form, many clients have 10+ sections with 15+ fields within the fieldsets.</p>

<pre><code>&lt;head&gt;
&lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type" /&gt;
&lt;title&gt;Project Overview&lt;/title&gt;
&lt;script type="text/javascript"&gt;
var projectType_Field_Id = '1169';

//Project Types
var projectTypes = new Array (
    {id : '11', value:'Cars'},
    {id : '12', value:'Boats'},
    {id : '13', value:'Planes'});

//occurs onLoad
function formOnLoad()
{
    var project_type = document.getElementById(projectType_Field_Id).value;
    refreshSections(project_type);
    }
/*
 *  Onchange - Project Type
 */
function projectTypeChange()
{ 
    var project_type = document.getElementById(projectType_Field_Id).value;
    refreshSections(project_type);
}

function refreshSections(selectedType) 
{    
    for (var i = 0; i &lt; projectTypes.length; i++) 
    {
        if (projectTypes[i].value == selectedType) 
        {
            document.getElementById("section-"+ projectTypes[i].id).style.display = '';
        } else {
            document.getElementById("section-"+ projectTypes[i].id).style.display = 'none';
        }
    }

}


&lt;/script&gt;
&lt;/head&gt;

&lt;body onload="formOnLoad();"&gt;
&lt;form method="post" action=""&gt;
&lt;fieldset 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; color:maroon"&gt;Name&lt;/td&gt;
                        &lt;td style="height: 33px"&gt;&lt;input  id="1125" name="1125" type="text" /&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td style="height: 33px; width: 178px; color:maroon"&gt;Email&lt;/td&gt;
                        &lt;td style="height: 33px"&gt;&lt;input  id="1026" name="1026" 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"  onChange="projectTypeChange();"&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;/table&gt;
            &lt;/fieldset&gt;&lt;br /&gt;&lt;br /&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 style="color:maroon"&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;select id="1433" 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;br /&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  style="color:maroon"&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;select id="1433" 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;br /&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  style="color:maroon"&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;select id="1433" 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-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;input name="Send Job" type="submit" value="Send Job" /&gt;

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