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?
Going the minimal change route, you could change this:
To this:
In this check if the control is
:hiddenit passes automatically, so effectively you’re not checking the hidden ones.