使用Javascript或SharePoint Designer 2010在SharePoint 2010列表中的条件列验证

Question

在我的sharepoint列表中，我有一个名为“Column 1”的列，其中包含“Yes”和“No”下拉列表，通过从下拉列表中选择Yes或No，相关列将显示或隐藏为按照既定标准。

如果“第1列”下拉列表为“是”，则与“第1列”相关的列应成为必填项，与下拉列表“否”相关的列不应成为强制性。

如果“第1列”下拉列表为“否”，则必须填写与“是”和“否”相关的列。

我想使用javascript / sharepoint designer 2010设置上述验证，这样当强制执行的字段（基于下拉选项）未填充，并单击“保存”按钮时，系统应该给出错误在强制性字段正下方的红色消息告诉我们填写该字段。

任何人都可以帮助我使用代码/方法来执行此操作吗？ 下面是我正在尝试的示例页面的屏幕截图。如果我在“云是否参与？”列中选择是，则会显示“选择云优惠”列，变得强制要求填补。 如果我在“云参与？”列中选择否，则会隐藏“选择云优惠”列，不是必须填写。 如果我们没有填写“选择云优惠”并点击保存，它应该以“云参与？”字段显示的方式提示错误消息被选中了。 Click Here for the screenshot

Answer 1

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

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

以上只是想法，您需要评估DropDown的值以将.prop（）设置为Enabled / Disabled，这样您就可以使用更一致的函数来执行下拉列表的VALUE评估。最后设置.prop（），但这是最快速完成它的直接方式。

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

官方JQuery API有一些功能样本：

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

Answer 2

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

最基本的选择是使用 COLUMN VALIDATION FORMULAS ，你需要制作一大套公式来圈出所有可能组合值的所有组合选项，这并不困难但需要正确编写每个单独公式的好时机。

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

在下图中，您会看到我的表单根据Column1上选择的选项启用和禁用字段，如果选择“YES”，则启用Option1和Option2并突出显示为红色（根据需要），以及使用在两个字段都填满之前无法保存数据，当用户将Column1更改为“NO”时，表格将使焦点远离Option1和Option2，将它们变为灰色并突出显示Option3和Option4。 / p>

基于相同的代码，您甚至可以禁用“保存”按钮，为用户提供更专业的用户界面，这是非常基本的，但很长，但我用这种方式编码来帮助您，而不是炫耀任何技能：）

只需按步骤操作：

1）从https://jquery.com/download/下载JQuery库，然后在“Scripts”文件夹中的文档库样式库中上传到SharePoint

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