Validez différents champs en fonction de ce qui est sélectionné dans une liste déroulante avec jQuery?

Question

Je dispose du code suivant pour masquer/afficher les éléments en fonction de la valeur sélectionnée dans une liste déroulante sur un formulaire de partage.

Cela fonctionne très bien mais je veux ajouter une certaine validation (champs obligatoires) en fonction de ce qui est sélectionné dans la liste déroulante "Niveau". Sharepoint a une fonction par défaut appelée PreSaveItem() que je dois appeler pour ne pas soumettre une 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> 

Mon code pour valider est (je l'ai mis dans le premier script ci-dessus):

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

Si les contrôles pour valider sont vides quand je clique après rien Soumettre chargement de la page se produit. Cependant, en fonction de ce qui est sélectionné dans la liste déroulante "Niveau" je veux vérifier les différents éléments à valider, comment puis-je modifier ces scripts pour y parvenir?

Answer 1

La voie de changement minime, vous pouvez changer ceci:

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

à ceci:

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

Dans ce contrôle si le contrôle est :hidden il passe automatiquement, de manière efficace, vous n'êtes pas vérifier les cachés.