根据jQuery下拉列表中选择的内容验证不同的字段？

Question

我有以下代码来隐藏/显示元素，具体取决于在SharePoint Server表单上的下拉列表中选择的值。

它工作正常，但我想添加一些验证（必填字段），具体取决于下拉列表“级别”中选择的内容。

Sharepoint有一个名为PreSaveItem（）的默认函数，我必须调用它才不提交页面。

<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> 

我的代码来验证是（我把它的第一个脚本内上方）：

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

如果控件验证是空的，当我点击后页面加载没有任何反应提交。 但是，根据在下拉列表中选择什么“级别”，我想检查要验证的不同项目，如何修改这些脚本以实现此目的？

Answer 1

去的最小变化的路线，你可以改变这一点：

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

要这样：

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

在此检查控制是:hidden它会自动将，所以有效地你不检查隐藏的。