none
Multi-Select Validation RRS feed

  • Question

  • I have a multi-select choice field for a user to populate. Let's say options A and C are selected. 

    • Option A 
    • Option B
    • Option C

    Next I have corresponding Date fields. 

    • Option A Date
    • Option B Date
    • Option C Date

    My challenge is, if 2 options are selected (ex A and C), staff are not paying attention and accidentally populate the wrong date fields. Example, Option B Date.

    I need a way to validate to tell the user something like, "Option B was not Selected. Please populate the correct Field."



    • Edited by TxSteve Tuesday, September 17, 2019 5:22 PM
    Tuesday, September 17, 2019 5:21 PM

Answers

  • Hi,

    Please modify the code as below.

    <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
    	var choiceField="Assigned to";
    	$(".ms-standardheader:contains('"+choiceField+"')").closest("tr").find("input").each(function(){
    		var label=$(this).next().text().split('-')[0].trim();
    		if($(this).is(':checked')){
    			$(".ms-standardheader:contains('"+label+"')").closest("tr").show();			 
    		}else{
    			$(".ms-standardheader:contains('"+label+"')").closest("tr").hide();
    		}
    	});
    	$(".ms-standardheader:contains('"+choiceField+"')").closest("tr").find("input").click(function(){
    		var label=$(this).next().text().split('-')[0].trim();
    		if($(this).is(':checked')){
    			$(".ms-standardheader:contains('"+label+"')").closest("tr").show();			 
    		}else{
    			$(".ms-standardheader:contains('"+label+"')").closest("tr").hide();
    		}	
    	});
    });
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Thursday, September 19, 2019 1:40 AM
    Moderator

All replies

  • Hi,

    We can show/hide the Date fields based on the multiple choice field using jQuery code. Add the code into script editor web part in new/edit form page.

    <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
    	var choiceField="Options";
    	$("input[id^='"+choiceField+"']").each(function(){
    		if($(this).is(':checked')){
    			$(".ms-standardheader:contains('"+$(this).next().text()+" Date')").closest("tr").show();			 
    		}else{
    			$(".ms-standardheader:contains('"+$(this).next().text()+" Date')").closest("tr").hide();
    		}
    	});
    	$("input[id^='"+choiceField+"']").click(function(){
    		if($(this).is(':checked')){
    			$(".ms-standardheader:contains('"+$(this).next().text()+" Date')").closest("tr").show();			 
    		}else{
    			$(".ms-standardheader:contains('"+$(this).next().text()+" Date')").closest("tr").hide();
    		}		
    	});
    });
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.


    Wednesday, September 18, 2019 5:22 AM
    Moderator
  • Wow, this looks great! Unfortunately it's not working for me. Think I know why, just not sure how to resolve. In my original post I simplified the data. "Options" and the choices (Option A, B, C) as well as the matching dates (Options A, B, C) however in real-life, my data is more closely aligned with this example

    Assigned to

    • ABC - Systems Analyst Team
    • DEF - Budget Office
    • GHI - Infrastructure Technology Division
    • George

    The date boxes have slightly different names as follows;

    • ABC Complete
    • DEF Complete
    • GHI Complete
    • 711GeorgeComplete

    I edited the script from "Options" to "Assigned to" and changed the " Date" to " Complete" but nothing worked. 

    I suspect it has to do with the .closest ("tr")  Is there another way to look at the Options? For example, is there a way to tell it to look at the first few characters, then match?  












    • Edited by TxSteve Wednesday, September 18, 2019 4:05 PM
    Wednesday, September 18, 2019 11:17 AM
  • Hi,

    Please modify the code as below.

    <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
    	var choiceField="Assigned to";
    	$(".ms-standardheader:contains('"+choiceField+"')").closest("tr").find("input").each(function(){
    		var label=$(this).next().text().split('-')[0].trim();
    		if($(this).is(':checked')){
    			$(".ms-standardheader:contains('"+label+"')").closest("tr").show();			 
    		}else{
    			$(".ms-standardheader:contains('"+label+"')").closest("tr").hide();
    		}
    	});
    	$(".ms-standardheader:contains('"+choiceField+"')").closest("tr").find("input").click(function(){
    		var label=$(this).next().text().split('-')[0].trim();
    		if($(this).is(':checked')){
    			$(".ms-standardheader:contains('"+label+"')").closest("tr").show();			 
    		}else{
    			$(".ms-standardheader:contains('"+label+"')").closest("tr").hide();
    		}	
    	});
    });
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Thursday, September 19, 2019 1:40 AM
    Moderator
  • Absolutely amazing! Thank you! Thank you!!!!!!

    I have one other question please.

    I have one option for the user to select called; All Teams

    If All Teams is selected by the user, then all dates fields should be visible. Is there a simple way to edit the code to permit that functionality?

      


    • Edited by TxSteve Thursday, September 19, 2019 1:19 PM
    Thursday, September 19, 2019 12:47 PM
  • Hi,

    Modify the code as below.

    <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
    	var choiceField="Assigned to";
    	$(".ms-standardheader:contains('"+choiceField+"')").closest("tr").find("input").each(function(){
    		var label=$(this).next().text().split('-')[0].trim();
    		if($(this).is(':checked')){
    			$(".ms-standardheader:contains('"+label+"')").closest("tr").show();
    			if($(this).next().text()=="All Teams"){
    				$(".ms-standardheader:contains('ABC Complete')").closest("tr").show();
    				$(".ms-standardheader:contains('DEF Complete')").closest("tr").show();
    				$(".ms-standardheader:contains('GHI Complete')").closest("tr").show();
    				$(".ms-standardheader:contains('711GeorgeComplete')").closest("tr").show();
    			}
    		}else{
    			$(".ms-standardheader:contains('"+label+"')").closest("tr").hide();
    		}
    	});
    	$(".ms-standardheader:contains('"+choiceField+"')").closest("tr").find("input").click(function(){
    		var label=$(this).next().text().split('-')[0].trim();
    		if($(this).is(':checked')){
    			$(".ms-standardheader:contains('"+label+"')").closest("tr").show();
    			if($(this).next().text()=="All Teams"){
    				$(".ms-standardheader:contains('ABC Complete')").closest("tr").show();
    				$(".ms-standardheader:contains('DEF Complete')").closest("tr").show();
    				$(".ms-standardheader:contains('GHI Complete')").closest("tr").show();
    				$(".ms-standardheader:contains('711GeorgeComplete')").closest("tr").show();
    			}
    		}else{
    			$(".ms-standardheader:contains('"+label+"')").closest("tr").hide();
    		}	
    	});
    });
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by TxSteve Friday, September 20, 2019 10:45 AM
    • Unmarked as answer by TxSteve Friday, September 20, 2019 12:42 PM
    Friday, September 20, 2019 1:02 AM
    Moderator
  • Thank you for the very fast and excellent guidance.  I can't thank you enough. 

    I do have a small challenge.

    These 2 scenarios work well 

    • If a user selects something like DEF and then deselects, the item is instantly hidden.  
    • If a user selects something like DEF and saves. Upon return to the edit the item, the non-selected fields are correctly hidden. 

    These 2 scenarios don't work well

    • If the user selects All Teams, all items are displayed; however, when you deselect, all items remain. 
    • If the user selects All Teams and all items are displayed, and the item is saved, upon return to edit at a later time, all fields remain hidden. 

    Suggestions on how we can have the All Teams choice function like the others? 



    • Marked as answer by TxSteve Friday, September 20, 2019 10:44 AM
    • Unmarked as answer by TxSteve Friday, September 20, 2019 10:45 AM
    • Edited by TxSteve Friday, September 20, 2019 1:02 PM
    Friday, September 20, 2019 10:44 AM
  • Hi,

    Please modify the code as below.

    <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
    	var choiceField="Assigned to";
    	$(".ms-standardheader:contains('"+choiceField+"')").closest("tr").find("input").each(function(){
    		var label=$(this).next().text().split('-')[0].trim();
    		if($(this).is(':checked')){
    			$(".ms-standardheader:contains('"+label+"')").closest("tr").show();			 
    		}else{
    			$(".ms-standardheader:contains('"+label+"')").closest("tr").hide();
    		}
    	});
    	$(".ms-standardheader:contains('"+choiceField+"')").closest("tr").find("input").click(function(){
    		var label=$(this).next().text().split('-')[0].trim();
    		if($(this).is(':checked')){
    			$(".ms-standardheader:contains('"+label+"')").closest("tr").show();			 
    		}else{
    			$(".ms-standardheader:contains('"+label+"')").closest("tr").hide();
    		}	
    	});
    });
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Good code block Dennis
    Friday, September 20, 2019 2:25 PM
  • Hi,

    You also need add the code in edit form page to make it works.

    Best Regards,
    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, September 23, 2019 1:00 AM
    Moderator
  • Thank you. That is the page I have my code on. Here are the results. 

    • Navigate to the SharePoint list
    • Select Line Item to Edit
    • EditForm.aspx opens, user selects "All Teams"
    • Scroll down on the page to view the ABC, DEF, GHI, etc. Associated "Complete" fields
    • Add a date to the desired field/s.  
    • Save and exit. 

    Result - To this point works great, however...

    Part 2:

    Same or Other user returns to the same line item to add their Complete date.  

    • Navigate to the SharePoint list
    • Select Line Item to Edit
    • EditForm.aspx opens, can see the option "All Teams" is selected
    • Scroll down on the page to view the ABC, DEF, GHI, etc. to populate desired (Complete) field
    • All Date (Complete) fields hidden. No way to populate 



    • Edited by TxSteve Monday, September 23, 2019 10:51 AM
    Monday, September 23, 2019 10:50 AM
  • Hi,

    Add the code below to new/edit form page.

    <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
    	var choiceField="Assigned to";
    	$(".ms-standardheader:contains('"+choiceField+"')").closest("tr").find("input").each(function(){
    		var label=$(this).next().text().split('-')[0].trim();
    		if($(this).is(':checked')){
    			$(".ms-standardheader:contains('"+label+"')").closest("tr").show();
    			if($(this).next().text()=="All Teams"){
    				$(".ms-standardheader:contains('ABC Complete')").closest("tr").show();
    				$(".ms-standardheader:contains('DEF Complete')").closest("tr").show();
    				$(".ms-standardheader:contains('GHI Complete')").closest("tr").show();
    				$(".ms-standardheader:contains('711GeorgeComplete')").closest("tr").show();
    			}
    		}else{
    			$(".ms-standardheader:contains('"+label+"')").closest("tr").hide();
    		}
    	});
    	$(".ms-standardheader:contains('"+choiceField+"')").closest("tr").find("input").click(function(){
    		var label=$(this).next().text().split('-')[0].trim();
    		if($(this).is(':checked')){
    			$(".ms-standardheader:contains('"+label+"')").closest("tr").show();
    			if($(this).next().text()=="All Teams"){
    				$(".ms-standardheader:contains('ABC Complete')").closest("tr").show();
    				$(".ms-standardheader:contains('DEF Complete')").closest("tr").show();
    				$(".ms-standardheader:contains('GHI Complete')").closest("tr").show();
    				$(".ms-standardheader:contains('711GeorgeComplete')").closest("tr").show();
    			}
    		}else{
    			if($(this).next().text()=="All Teams"){
    				$(".ms-standardheader:contains('ABC Complete')").closest("tr").hide();
    				$(".ms-standardheader:contains('DEF Complete')").closest("tr").hide();
    				$(".ms-standardheader:contains('GHI Complete')").closest("tr").hide();
    				$(".ms-standardheader:contains('711GeorgeComplete')").closest("tr").hide();
    			}
    			$(".ms-standardheader:contains('"+label+"')").closest("tr").hide();
    		}	
    	});
    });
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Wednesday, September 25, 2019 7:31 AM
    Moderator
  • Good morning and thank you. Unfortunately same result. 

    If user selects a specific line, "ABC Complete", and enters a date and saves, when they or another user returns to the same line item and edits again, the "ABC Complete" is visible. Works great. 

    However, if the user selects "All Teams" (all "Complete" fields are instantly visible) and enters a date in one of the fields, ex. "ABC Complete" and saves -when the next user comes along and wants to enter their date such as "DEF Complete", they cannot. All of the Complete fields are hidden, including the previous ABC Complete entry.  

    I have added the code to both the NewForm and EditForm pages. 

    Background: I have a workflow that runs when a new item is added. If the user selects ex. ABC or DEF or both, the workflow will run and email both notifying them of action.

    Optionally, if a new item is added, and the user simply selects All Teams, many emails are sent notifying all teams to go to the site and record their dates. 



    • Edited by TxSteve Wednesday, September 25, 2019 11:19 AM
    Wednesday, September 25, 2019 10:59 AM