根據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它會自動將，所以有效地你不檢查隱藏的。