Validate different fields depending on what is selected in a dropdown list with jQuery?
<p>I have the following code to hide/show elements depending on what value is selected in a dropdown list on a sharepoint form.</p>

<p>It works fine but I want to add some validation to it (required fields) depending on what is selected in the dropdown list "Level".</p>

<p>Sharepoint has a default function called PreSaveItem() that I must call to not submit a page.</p>

<pre><code>&lt;script type="text/javascript"&gt;
//Items to hide when page first loads
$(document).ready(function ($) { 

$('nobr:contains("Vision")').closest('tr').show();
$('nobr:contains("Goal")').closest('tr').show();
$('nobr:contains("Performance")').closest('tr').hide();
$('nobr:contains("Start Date")').closest('tr').show();
$('nobr:contains("Target Date")').closest('tr').show();
});

&lt;/script&gt;
&lt;script type="text/javascript"&gt; 

$(document).ready(function ($) { 
    $("select").bind("change", function(e){

    var thistag = e.target.title;
    var thisvalue =e.target.value;

if (thistag == "Level")
{

    if (thisvalue == "Vision") 
            {
$('nobr:contains("Vision")').closest('tr').hide();
$('nobr:contains("Goal")').closest('tr').hide();
$('nobr:contains("Performance")').closest('tr').hide();
$('nobr:contains("Start Date")').closest('tr').hide();
$('nobr:contains("Target Date")').closest('tr').hide();
};

    if (thisvalue == "Goal") 
            {
$('nobr:contains("Vision")').closest('tr').show();
$('nobr:contains("Priority")').closest('tr').show();
$('nobr:contains("Goal")').closest('tr').show();
$('nobr:contains("Performance")').closest('tr').hide();
$('nobr:contains("Start Date")').closest('tr').show();

$('nobr:contains("Target Date")').closest('tr').show();
};

    if (thisvalue == "Performance") 
            {
$('nobr:contains("Vision")').closest('tr').show();
$('nobr:contains("Goal")').closest('tr').show();
$('nobr:contains("Performance")').closest('tr').hide();
$('nobr:contains("Start Date")').closest('tr').hide();
$('nobr:contains("Target Date")').closest('tr').hide();
};

    if (thisvalue == "Actions") 
            {
$('nobr:contains("Vision")').closest('tr').show();
$('nobr:contains("Goal")').closest('tr').show();
$('nobr:contains("Performance")').closest('tr').hide();
$('nobr:contains("Start Date")').closest('tr').show();
$('nobr:contains("Target Date")').closest('tr').show();

};
};
});
   });

&lt;/script&gt;


&lt;script type="text/javascript"&gt;  

$(document).ready(function ($) { 
    $().SPServices.SPCascadeDropdowns({ 
            relationshipList: "Priority Tracking List",
            relationshipListParentColumn: "FoundationName",
            relationshipListChildColumn: "Title",
            parentColumn: "Vision",
            childColumn: "Goal"
        });

      });

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

<p>My code to validate is(I put it inside the first script above):</p>

<pre><code>//bind a change event to all controls to validate 
$("input[title=Target Date],input[title=Start Date],select[title=Vision],select[title=Goal]").change(function(){
    checkControls()
});

//the change event function - check the status of each control
function checkControls(){

//set a variable to count the number of valid controls
var controlsPassed = 0;

//set up a selector to pick .each() of the target controls
$("input[title=Target Date],input[title=Start Date],select[title=Vision],select[title=Goal]").each(function(){

//if the control value is not zero AND is not zero-length
if($(this).val() != 0 &amp;&amp; $(this).val().length != 0) {

//add one to the counter
controlsPassed += 1
}

});

//call the showHide function and pass the true/false statement of 4 valid controls
return (controlsPassed == 4);
}
    function PreSaveItem() {
        return checkControls()
}
</code></pre>

<p>If the controls to validate are empty when I click Submit after page load nothing happens.
However, depending on what is selected in the dropdown list "Level" I want to check for different items to validate, how do I alter these scripts to achieve this?</p>
