CODEWITHSUNDEEP
jquery
Peter
Peter

Reputation: 675

Validate different fields depending on what is selected in a dropdown list with jQuery?

I have the following code to hide/show elements depending on what value is selected in a dropdown list on a sharepoint form.

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

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

<script type="text/javascript">
//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();
});

</script>
<script type="text/javascript"> 

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

};
};
});
   });

</script>


<script type="text/javascript">  

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

      });

</script>

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

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

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?

Upvotes: 0

Views: 768

Answers (1)

Nick Craver
Nick Craver

Reputation: 630379

Going the minimal change route, you could change this:

if($(this).val() != 0 && $(this).val().length != 0) {

To this:

var val = $(this).val();
if($(this).is(':hidden') || (val != 0 && val.length != 0)) {

In this check if the control is :hidden it passes automatically, so effectively you're not checking the hidden ones.

Upvotes: 2

Related Questions