【问题标题】:Conditional Column Validations in SharePoint 2010 list using Javascript or SharePoint Designer 2010SharePoint 2010 列表中的条件列验证使用 Javascript 或 SharePoint Designer 2010
【发布时间】:2017-12-31 20:12:05
【问题描述】:

在我的共享点列表中,我有一个名为“第 1 列”的列,其中包含“是”和“否”下拉列表,因此从下拉列表中选择“是”或“否”,相关列将显示或隐藏为根据设定的标准。

如果“第 1 列”下拉菜单为“是”,则与“第 1 列”相关的列应成为必填项,与“否”下拉菜单相关的列不应成为必填项。

如果“第 1 列”下拉菜单为“否”,则与“是”和“否”相关的列应强制填写。

我想使用 javascript/sharepoint Designer 2010 设置上述验证,这样,当未填写必填字段(基于下拉选择)并单击保存按钮时,系统应给出错误必填字段正下方的红色消息,告诉我们填写该字段。

任何人都可以帮我提供执行此操作的代码/方法吗? 下面是我正在尝试的示例页面的屏幕截图。如果我在“Is Cloud Involved?”列中选择Yes,则会显示“Choose the Cloud Offers”列并且应该成为必填项。 如果我在“Is Cloud Involved?”列中选择No,则“Choose the Cloud Offers”列将被隐藏,它应该不强制填写。 如果我们没有填写“选择云服务”并点击保存,它应该提示错误消息,它在“Is Cloud Involved?”字段中显示的方式是什么被选中。 Click Here for the screenshot

【问题讨论】:

    标签: javascript sharepoint sharepoint-2010 designer


    【解决方案1】:

    在页面加载之前使用以下事件在页面上编写一个小 JQuery 脚本:

    $(document).ready(function(){
       $("name of the dropdown control").change(function(){
           $("control #1 related to column 1").prop('disabled', true); 
       });
    });
    

    以上只是想法,您需要评估 DropDown 的值以将 .prop() 设置为启用/禁用,因此您将拥有一个更一致的函数来执行下拉列表的 VALUE 评估和最后设置 .prop() ,但这是快速完成它的最简单直接的方法。

    请记住,您正在阅读一个基于 JQuery 的示例,并且您需要在部署解决方案时将 JQuery 库添加到页面的加载中。

    官方的 JQuery API 有一个小功能示例:

    https://api.jquery.com/change/

    【讨论】:

    • 您好寿司博士,谢谢您的回复。我不是编码员。我不知道javascript。我设法构建了我的表单,在谷歌上搜索代码,并解决了我在这个网站上发布对我的问题的回复时遇到的问题。你能帮我提供我应该用来实现验证的完整代码吗?这是我必须修改代码的方式吗? '$(document).ready(function(){ $("Are you Travelling").change(function(){ $("Which Country").prop('disabled', true); }); }); '
    • 当然,我可以帮忙,您的页面是您使用 SP Designer 创建的自定义页面,对吗?放一张屏幕截图,让我大致了解一下它的外观,我现在正试图猜测你在设计什么。
    • 不,我没有使用 SharePoint 设计器。我创建了包含所有列的共享点列表,并在默认的新表单和默认编辑表单中使用了 js 代码,并根据列中的下拉菜单创建了带有显示/隐藏列的表单。
    • 博士。寿司,我在上面的原始帖子中添加了一段,并附上了表格的截图。感谢您提供帮助!
    【解决方案2】:

    实现您想要的并不容易,您需要使用客户端编码来完全验证表单并按照您描述为表单要求的方式启用/禁用字段。

    最基本的选项是使用列验证公式,你需要制作一大组公式来圈出所有可能的组合值的所有组合选项,这并不难,但需要现在是正确编写每个单独公式的好时机。

    现在让我们谈谈第二个选项,这是最好的一个,我已经编写了一个功能齐全的解决方案来解决您的问题,您现在所要做的就是复制并粘贴到您的 EditForm.aspx 和 NewForm.aspx ,不要忘记更改各自的字段名称。

    在下图中,您会看到我的表单根据 Column1 上选择的选项启用和禁用字段,如果选择“YES”,则启用 Option1 和 Option2 并以红色突出显示(根据需要),使用在两个字段都填满之前无法保存数据,当用户将 Column1 更改为“NO”时也是如此,表单会将焦点从 Option1 和 Option2 移开,将它们变为灰色并突出显示 Option3 和 Option4。

    基于相同的代码,您甚至可以禁用“保存”按钮,为用户提供更专业的用户界面,这非常初级且相当长,但我这样编码是为了帮助您而不是炫耀任何技能:)

    一步一步来:

    1) 从https://jquery.com/download/ 下载 JQuery 库并上传到您的 SharePoint 中“Scripts”文件夹内的文档库样式库中

    2) 使用 SharePoint Designer 打开 NewForm.aspx 或 EditForm.aspx(在高级模式下编辑文件)

    3) 在本节之后粘贴解决方案代码:

    <asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
    

    上面的屏幕截图显示了我的自定义代码从哪里开始,最终看起来像下面的两张图片:

    4) 此代码不会显示任何有关验证字段的消息,而是会在浏览器的控制台窗口上打印日志消息,按 F12 键,您会收到字段验证的警告消息,如下面的屏幕截图所示:

    5) 最后但同样重要的是,在脚本中有一个指向 JQuery 库位置的条目,您需要更改 http://your-domain-name/Style%20Library/Scripts/jquery-3.2.1.min.js 以反映您自己的地址而不是我的地址。

    从上面的步骤可以看出,代码功能齐全,您只需要更改字段名称即可。

    祝你好运,希望你今天学到了一些新东西。

    <!-- custom code -->
    
    <script type="text/javascript" src="http://portal.overlord.local:8080/Style%20Library/Scripts/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
    
    $(document).ready( function(){
    
    	// will set the respective columns for YES
    
    	$("input[Title='Option1']").change( function() {
    		var isEmpty = $("input[Title='Option1']").val() == '' &&  $("select[Title*='Column1'] option:selected").text() == 'YES';
    		$("input[Title='Option1']").css("border", isEmpty ? "1px solid red" : "1px solid gray");
    	}).trigger("change");
    
    	$("input[Title='Option2']").change( function() {
    			var isEmpty = $("input[Title='Option2']").val() == '' &&  $("select[Title*='Column1'] option:selected").text() == 'YES';
    			$("input[Title='Option2']").css("border", isEmpty ? "1px solid red" : "1px solid gray");
    	}).trigger("change");
    
    	// will set the respective columns for NO
    
    	$("input[Title='Option3']").change( function() {
    			var isEmpty = $("input[Title='Option3']").val() == '' &&  $("select[Title*='Column1'] option:selected").text() == 'NO';
    			$("input[Title='Option3']").css("border", isEmpty ? "1px solid red" : "1px solid gray");
    	}).trigger("change");
    
    	$("input[Title='Option4']").change( function() {
    			var isEmpty = $("input[Title='Option4']").val() == '' &&  $("select[Title*='Column1'] option:selected").text() == 'NO';
    			$("input[Title='Option4']").css("border", isEmpty ? "1px solid red" : "1px solid gray");
    	}).trigger("change");
    
    
    	//
    	// set the on change event for the drop down
    	//
    
    	$("select[Title*='Column1']").change( function() {
    
    		var State = $("select[Title*='Column1'] option:selected").text() == 'YES' ? false : true;
    
    		$("input[Title='Option1']").prop("disabled", State).trigger("change");
    		$("input[Title='Option2']").prop("disabled", State).trigger("change");
    
    		$("input[Title='Option3']").prop("disabled", !State).trigger("change");
    		$("input[Title='Option4']").prop("disabled", !State).trigger("change");
    
    	}).trigger("change");			// it triggers itself to call itself to enable/disable the fields
    
    });
    
    
    function PreSaveAction()
    {
    	var State = $("select[Title*='Column1'] option:selected").text() == 'YES' ? false : true;
    
    	if (!State )
    	{
    		if ( $("input[Title='Option1']").val() == '' || $("input[Title='Option2']").val() == '' )
    		{
    			console.log('Option1 or Option2 are empty');
    			return false;
    		}
    		else
    		{
    			console.log('Option1 and Option2 were filled, all good!');
    			return true;
    		}
    	}
    	else
    	{
    		if ( $("input[Title='Option3']").val() == '' || $("input[Title='Option4']").val() == '' )
    		{
    			console.log('Option3 or Option4 are empty');
    			return false;
    		}
    		else
    		{
    			console.log('Option3 and Option4 were filled, all good!');
    			return true;
    		}
    	}
    }
    </script>
    
    <!-- end of custom code -->

    【讨论】:

    • 您好寿司博士,感谢您提供详细的步骤和代码。该代码对我不起作用。我根据您的步骤更改了字段名称和下拉值并在共享点设计器中添加了代码并保存了它。然后我在浏览器中打开了表单并保存了表单,但是当我点击保存时没有任何反应。如果我删除代码,保存按钮就会起作用。我什至尝试将代码添加到新表单页面中的 web 部件(通过浏览器)并保存并检查表单。它也没有那样工作。我的网站在 sharepoint 2010 上。不确定这是问题所在。对不起,我很困扰你:(
    • SAVE 按钮不“工作”,因为 PreSave() 函数正在验证表单中的条目,如果验证符合条件,则函数 PreSave() 允许 SAVE 按钮关闭数据,这一切都很好,我可以看到您确实将代码正确粘贴到表单中,但您可能没有更改所有字段以满足表单上的内容 - 在您的浏览器上按 F12 查看控制台窗口,它会输出一些错误信息。
    • 感谢先生的帮助。我再次检查了代码。我没有错过更改任何字段。我什至创建了与您的完全一样的新列表,只需将 jquery 文件的路径更改为我的文件位置即可复制粘贴您的代码。它没有用。当我在浏览器上按 F12 时,控制台选项卡中有以下行:“附加页面以文档模式 8 为目标。某些控制台 API 和功能可能不可用”。然后,如果我单击添加新项目链接,它会在控制台中显示此错误:“SCRIPT70: Permission denied. File: browsertools.library.js, Line: 1, Column: 1”跨度>
    猜你喜欢
    • 2016-08-10
    • 1970-01-01
    • 2017-08-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-11-03
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多