In SharePoint, there is requirement where we need to apply custom validation based on certain condition on specific column value. Validation may include show hide field, make required field, show error massage on blank form submission etc.
In this article I will explain a scenario involving such validations and some functions for validations using script.
Let us assume our requirement has a list called ‘Travel’ to getting travel related data like status code depending on mode of transport. The list has the following fields:
Here we apply custom validation based on ‘Travel Mode’. ‘Travel Mode’. is choice field which has values “Train, Plane and Others”
Below are condition we need to add in our custom list form for the validation
- If TravelMode==’Train’ then show ‘PNRCode’ with mandatory
- If TravelMode==’Plane’ then show ‘ANRCode’ with mandatory
- If TravelMode==’Other‘ then show ‘StatusCode’ with mandatory
Note: When you create a list, Please note that following columns should not be mandatory in list.
* PNRCode
* ANRCode
* StatusCode
Now, we need to edit list form and add a jQuery reference after.
<asp:Content ContentPlaceHolderId=”PlaceHolderMain” runat=”server”>
Add references to the jQuery libraries and a custom JavaScript file that we create as follows:
Please notice that initial we will hide these above three columns and call ‘OnTravelChangeNewForm’ function defined in PreSaveAction.js file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
function OnTravelChangeNewForm() { $("select[title='TravelMode Required Field']").on("change",function () { var val = $(this).find("option:selected").text(); if (val === 'Train') { FieldMakeVisible("PNRCode"); FieldMakeMandatory('PNRCode', 'True'); FieldMakeMandatory('ANRCode', 'False'); FieldMakeHidden("ANRCode"); FieldMakeMandatory('StatusCode', 'False'); FieldMakeHidden("StatusCode"); } else if(val === 'Plane'){ FieldMakeMandatory('PNRCode', 'False'); FieldMakeHidden("PNRCode"); FieldMakeVisible("ANRCode"); FieldMakeMandatory('ANRCode', 'True'); FieldMakeMandatory('PNRCode', 'False'); FieldMakeHidden("StatusCode"); } else if(val ==='Other'){ FieldMakeVisible("StatusCode"); FieldMakeMandatory('StatusCode', 'True'); FieldMakeMandatory('PNRCode', 'False'); FieldMakeHidden("PNRCode"); FieldMakeMandatory('ANRCode', 'False'); FieldMakeHidden("ANRCode"); } else if(val ==''){ FieldMakeMandatory('PNRCode', 'False'); FieldMakeMandatory('ANRCode', 'False'); FieldMakeMandatory('StatusCode', 'False'); FieldMakeHidden("PNRCode"); FieldMakeHidden("ANRCode"); FieldMakeHidden("StatusCode"); } }); } |
Check out ‘OnTravelChangeNewForm’ function here based on drop down value we are calling FieldMakeHidden(), FieldMakeVisible() and FieldMakeMandatory() functions.
FieldMakeHidden() function: Attempts to make fields hidden
|
1 2 3 4 5 6 7 8 |
function FieldMakeHidden(FieldName) { //Disables field with Specific name --- Should work on all types of fields SpecificFieldTitle(FieldName).parent().parent().children('.ms-formbody').children().find('input').removeClass('OnChnageShow'); $(SpecificFieldTitle(FieldName)) .closest("tr") .hide(); } |
SpecificFieldTitle() function : Attempts to return a specific h3 Title of Field Name
|
1 2 3 4 5 6 |
function SpecificFieldTitle(FieldName){ //Attempts to return a specific h3 Title Element --- Filters for Same Name //alert(FieldName); return $(".ms-h3 > nobr:contains('" + FieldName + "')").filter(function(){ return $(this).clone().find("span").remove().end().text() == FieldName; }).closest(".ms-h3"); } |
FieldMakeVisible() function: Attempts to make fields visible
|
1 2 3 4 5 6 7 8 |
function FieldMakeVisible(FieldName) { //Enable field with Specific name --- Should work on all types of fields SpecificFieldTitle(FieldName).parent().parent().children('.ms-formbody').children().find('input').addClass('OnChnageShow'); $(SpecificFieldTitle(FieldName)) .closest("tr") .show(); } |
FieldMakeMandatory() function : Parameter like FieldName and boolean value true or false to make fields are mandatory.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function FieldMakeMandatory(FieldName, mandatory) { if(mandatory=="True") { var spanTag ='<span class="ms-accentText" title="This is a required field."> *</span>'; var newHtml = FieldName; if (mandatory) { newHtml += spanTag; $("nobr").filter(function() { return $(this).text() === FieldName; }).html(newHtml); SpecificFieldTitle(FieldName).parent().parent().children('.ms-formbody').children().find('input').attr("title",''+FieldName+' Required Field'); } } else if(mandatory=="False"){ SpecificFieldTitle(FieldName).closest('td').children('.ms-standardheader').children().children('.ms-accentText').remove(); SpecificFieldTitle(FieldName).parent().parent().children('.ms-formbody').children().find('input').attr("title",''+FieldName+''); } } |
Basically, even though the columns are not specified as “Required” in the list definition, we are trying to make the display that it is mandatory for the users to fill in a value for this column.
ValidateNewForm() function : Does actual validation in form on submit button click
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function ValidateNewForm() { var missingFields=""; FieldIsHiddenOrNot('PNRCode'); //Validate PNRCode on blank if field not a hidden on form FieldIsHiddenOrNot('ANRCode'); //Validate ANRCode on blank if field not a hidden on form FieldIsHiddenOrNot('StatusCode'); //Validate StatusCode on blank if field not a hidden on form var isFormValid=(missingFields.length==0); if(!isFormValid) { alert("Please enter values in the following fields - " +"\n"+ missingFields); } return isFormValid; } |
FieldIsHiddenOrNot() function: Check FieldName it visible or not and then validate it.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
function FieldIsHiddenOrNot(FieldName){ if( SpecificFieldTitle(FieldName).parent().parent().css('display') == 'none' ) { } else { //Enable field with validation --- Should work on all types of fields if($("input[title='"+FieldName+" Required Field']").val().length < 1) { SpecificFieldTitle(FieldName).parent().parent().children('.ms-formbody').children().find('span.ms-formvalidation').remove(); SpecificFieldTitle(FieldName).parent().parent().children('.ms-formbody').children().find('input').addClass('OnChnageShow'); $('input.OnChnageShow').after('<span class="ms-formvalidation ms-csrformvalidation"><span role="alert">You can not leave this blank.<br></span></span>'); } else { //disable field with validation --- Should work on all types of fields SpecificFieldTitle(FieldName).parent().parent().children('.ms-formbody').children().find('span.ms-formvalidation').remove(); SpecificFieldTitle(FieldName).parent().parent().children('.ms-formbody').children().find('input').removeClass('OnChnageShow'); } } } |
Open the new form of the Travel List
When Train is selected, observe that PNRCode columns are displayed as mandatory and other two column are hidden.
On blank submit data were we show custom error message
Reference:
Custom Validation
