Recently I was faced with the need to add validation to a SharePoint list form.  Our environment was SharePoint 2013 on-prem so our only option was InfoPath and I refused to go down that road.  So I reverted back to what any developer would do.  I used plain old vanilla JavaScript and DOM development.  Here’s the scenario:

I had a SharePoint list that had 4 content types with different fields and each content type needed to have certain fields hidden as it went through a document approval process.  Here’s an image of what one of the 4 content type approval forms looks like.  In this blog, I will show you how to use DOM traversal to add functionality to a form.

In the above form, Chief Document Approve? has the following options in the drop down (Approval, Approval with Feedback, Final Approval, Further Discussion Needed).  The functionality that needed to happen was that if Approval with Feedback or Further Discussion Needed was selected, then Chief Feedback multi-line box would show, if not it will be hidden.

When a new form is initially opened, the Chief Document Approve? drop down would be blank, which means that the Chief Feedback multi-line box would need to be hidden by default.   I will show you how to accomplish this but first, here’s what the DOM of Chief Feedback looks like.  As you can see in the image below, the textarea’s (Chief Feedback) parent is the span tag which is inside of a td tag which is inside of a tr tag.  So the textarea tag has three parents as seen below.

Now that we know what the DOM looks like, we can use this new reference to hide the Chief Feedback box.  See code below.

var chiefFeedback = document.querySelector("[title='Chief Feedback']");
chiefFeedback.parentNode.parentNode.parentNode.style.visibility = "hidden"; 

As you can see from the first line, we get a reference to our textarea box by referencing it by its title using the querySelector DOM API.  Once we have that reference, we reference the whole row (tr) by traversing all the way up to the parent from the textarea box.  That’s why we have the three parentNode from chiefFeedback.  Once we have that we use style.visibility = ‘hidden’ to hide the whole row.  But that’s only half the battle.  We want the feedback box to show if the drop down selection is Approval with Feedback or Further Discussion Needed and be hidden if not selected.

What we would need to do to accomplish our next task is to attach an onchange event to the drop down so that when there is a selection, we can check for what it is and take the appropriate action.   See code below on how to accomplish this.  There’s enough comments to understand what’s going on.

   /*Get a reference to the chief approve drop down box*/
   var chiefApprove = document.querySelector("[id^='ChiefDocumentApproval']");

   /*Attach an onchage event to drop down*/
   chiefApprove.onchange = function(){

   /*Grab the selected value*/
   var aValue = chiefApprove.options[chiefApprove.selectedIndex].value;

   /*Show and hide feedback field based on the selected value*/
   if(aValue == "Approval with Feedback" || aValue == "Further discussion needed")
     {

     /*Show box*/
     chiefFeedback.parentNode.parentNode.parentNode.style.visibility = "table-row";
     }else{

    /*Hide box*/
    chiefFeedback.parentNode.parentNode.parentNode.style.visibility = "hidden";
     }

   }

I hope this makes sense and can help you.  Happy SharePoint Client Side Coding! 🙂  Please leave a comment if you like this post.

SharePoint SharePoint 2013