Custom validation in SharePoint 2013 page layouts

I this blog post I will explain how to add your own custom (client-side) validation to a SharePoint 2013 Page Layout.

As you already might know a page layout if often associated with a content type within SharePoint. Every page layout is associated with a content type, typically one of the content types in the Page Layout group. For example, the Article Page content type that is associated with the Article Page page layout, both of which are included in a publishing site. A content type is made of site columns, which together define a schema of allowed data types.

SharePoint provides the possibility to add attributes such as required and max-length and other requirements to a site column. Configuring these is possible via Site Settings -> Site Coloumns -> Select your Coloumn -> Edit Coloum Based on the type a set of different settings are possible.

When the user tries to checks-in or publishes a page in SharePoint it will show default validation message.

RequiredSPField

Some drawbacks of default SP control validation that I have encountered:

  • validation takes place after page postback
  • no possibility to customize the validation message
  • Interactive validation is not possible

To solve all these issues, I decided to experiment with client side validation for Page Layouts to provide better UX for end users. In the next paragraphs I will explain how to integrate JQuery Validator into your SharePoint solution and make use of the most advanced interactive validation possibilities of JQuery.

First of all, you need to download JQuery Validator, provision the file to your style library and include the script into your master page:

	<script language="javascript" src="<asp:Literal runat='server' Text='<%$SPUrl:~sitecollection/Style%20Library /scripts/jquery.validate.min.js%>'/>"></script>

Make sure that a JavaScript file is included in your page. You will need to manipulate HTML from this JavaScript file to enable custom validation. Just to make it easier for you one way to include a JS file into your page layout you might want to add the next lines before the body end tag of your page:

<script type="text/javascript">
		var relativeUrl = _spPageContextInfo.siteServerRelativeUrl;
		var pageScript = document.createElement('script');
		pageScript.setAttribute("type", "text/javascript");
		pageScript.setAttribute("src", relativeUrl + '/Style%20Library/ /scripts/page.js');
		document.body.appendChild(pageScript);
	</script>

Make sure that this file is available in your StyleLibrary. Next add next lines to document ready function of this JS file:

var input = $("input[id*='someId']");
input.prop('required', true);

Two important things that you need to understand:

  • JQuery will use the required attribute to indicate whether an input field is required
  • ‘someId’ is the ID of your control as you have included in your page layout HTML.

If you are able to create a custom button to publish your page you could include the next lines into the onclick function of that button:

validate = function () {

var validator = $("#aspnetForm").validate({
			ignoreTitle: true,
			messages: {
				someId: "Hi user please fill in this field!"			}
		});
		var isValid = validator.form();

		if (isValid) {
			var command = 'PageStateGroupPublish';
			SP.Ribbon.PageState.Handlers.showStateChangeDialog(command, SP.Ribbon.PageState.ImportedNativeData.CommandHandlers[command]);
		}

}

If this is not possible you could also use the next function to trigger a submit form:

Page.ClientScript.RegisterOnSubmitStatement(this.GetType(), "validate_page", " if (!validate()) { return false; }; ");

For more JQuery validation options and configuration please referrer to: http://jqueryvalidation.org/

I hope this post helped you with your code!

Leave a Reply

Your email address will not be published. Required fields are marked *