根据使用jQuery在下拉列表中选择的内容验证不同的字段?

时间:2010-08-16 01:15:16

标签: jquery

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

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

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

如果在页面加载后单击“提交”时要验证的控件为空,则不会发生任何操作。 但是,根据在下拉列表“Level”中选择的内容,我想检查要验证的不同项目,如何更改这些脚本以实现此目的?

1 个答案:

答案 0 :(得分:2)

走最小的改变路线,你可以改变这个:

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

对此:

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

在此检查中,如果控件是:hidden,它会自动传递,因此您不会检查隐藏的控件。