Conditional Column Validations in SharePoint 2010 list using Javascript or SharePoint Designer 2010

Question

In my sharepoint list, I have a column called "Column 1" with "Yes" and "No" dropdowns such that with the selection of a Yes or a No from the dropdown, the related columns wil be shown or hidden as per the set criteria.

If the “Column 1” dropdown is "Yes", the columns related to "Column 1" should become mandatory to be filled and the columns related to the dropdown "No" should not become mandatory.

If the “Column 1” dropdown is "No", the columns related to both "Yes" and "No" should become mandatory to be filled.

I want to set up the validations for the above using javascript/sharepoint designer 2010 such that, when the fields that become mandatory (based on dropdown selections) are not filled, and clicked on save button, the system should give an error message in red colour right below the mandatory field telling us to fill that field.

Can anyone please help me with the code/method to do this? below is the screenshot of the sample page I am trying on. If I choose Yes in the " Is Cloud Involved? " column, then the " Choose the Cloud Offers " column will be displayed and it should become mandatory to be filled. If I choose No in the " Is Cloud Involved? " column, then the " Choose the Cloud Offers " column will be hidden and it should NOT become mandatory to be filled. If we dont fill the " Choose the Cloud offers " and click save, it should prompt error message the way it shows for " Is Cloud Involved? " field when it is nothing is selected for it. Click Here for the screenshot

Answer 1

On your page write a little JQuery script before the page is loaded using the following event:

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

The above is just the idea, you will need to evaluate the value of the DropDown to set the .prop() to Enabled/Disabled, so you would have a more consistent function that performs the VALUE evaluation of the dropdown and the setting of the .prop() in the end, but this is the easiest straightforward way to get it done fast.

Remember, you are reading an example based on JQuery and you will need to add the JQuery library to the loading of the page when deploying the solution.

The official JQuery API has a little functional sample:

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

Answer 2

There is no easy to implement what you want, you need to employ Client Side coding to fully validate a form and enable/disable fields the way you have described as a requirement for your form.

The very basic option is to use COLUMN VALIDATION FORMULAS , you will need to craft a big set of formulas to circle all the combined options for all the possible combined values, it is not difficult but takes a good time to properly write each individual formula.

Now let's talk about the second option, this is the best one and I've written a full functional solution to solve your problem, all you have to do now is to copy and paste into your EditForm.aspx and NewForm.aspx, don't forget to change the field names for your respective ones.

In the picture below, you see my form enabling and disabling the fields according to the option selected on Column1, if "YES" is selected, the Option1 and Option2 are enabled and are highlighted red (as required), and the use can't save the data until both fields are filled, the same is true when the user changes the Column1 to "NO", the form will put the focus away from Option1 and Option2, turning them to gray and highlighting Option3 and Option4.

Based on the same code, you can even disable the "SAVE" button, giving a much more professional UI for the user, this is pretty rudimentary and quite long but I coded this way to help you and not to show off any skills :)

Just follow step by step:

1) Download the JQuery library from https://jquery.com/download/ and upload to your SharePoint in the document library Style Library inside the folder "Scripts"

2) Open you NewForm.aspx or EditForm.aspx using SharePoint Designer (Edit File in Advanced Mode)

3) Paste the solution code right after this section:

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

the screen shot above shows where my custom code starts, will end up looking like the next two pictures below:

4) This code will not show any messages about the validation fields, instead it will print log messages on the console window of your browser, press F12 and you get the warning messages for the field validation, like in this screen shot:

5) Last but not least, on the script there is an entry pointing to the location of the JQuery library, you need to change http://your-domain-name/Style%20Library/Scripts/jquery-3.2.1.min.js this to reflect your own address instead of mine there.

So as you can see from the step by step above, the code is fully functional, on your end you need to simply change the field names.

Good luck and hopefully you learned something new today.

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