Introduction to Client Forms Validation in SharePoint 2013

Client side event handlers in SharePoint

In addition to server side Event Model,  SharePoint also provides client side  event handling capabilities when working with List Forms.

Let’s see briefly how it works. In List Forms pages Save button click handler triggers PreSaveItem function , PreSaveItem function is declared in forms.js:

PreSaveAction function from another hand, is a user defined function that allows to override standard behavior for a Save button handler, so in terms of server side event model it is a binding mechanism.

I find this mechanism  pretty convenient for implementing custom client side validation in List Forms,  the following example demonstrates how to implement client side validation for Email field in Contacts list:

EmailValidate

Client forms validation in SharePoint 2013

In SharePoint 2013 as part of  Client-Side Rendering (CSR), there is SPClientForms.ClientValidation  namespace (clientforms.js) that contains  types and objects for performing  client side validation in List Forms. For example,

SPClientForms.ClientValidation.RequiredValidator object is intended for evaluating the value of an field control to ensure that the user enters a value (it  is invoked for a fields when SPField.Required property is set to True):

Below is provided a complete example that demonstrates how to implement  client-side validation for Email field in Contacts list:

Key points:

  • CustomClientValidation.EmailValidator object implements a custom validation  for Email field
  • since Email field is a standard Text Field,  the rendering of field control is reused, only custom validator is registered for a field (see function EmailField_Edit for a details)
Advertisements

5 thoughts on “Introduction to Client Forms Validation in SharePoint 2013

  1. Hi Vadim,

    This article is great, but what can one do when he needs to run a JavaScript function after the form has passed the validation test, namely after the form has been successfully submitted?

  2. Dear SharePoint Experts,

    Please help.

    Why is PreSaveAction not firing in SharePoint 2013 when creating a new item with the NewDocSet.aspx page, which is based on a custom Content Type?

    — In my SiteAssets folder, I have these files…

    jquery.js (which is jQuery JavaScript Library v1.11.1)

    CustomScripts.js (which is my custom JS file)

    — On my Master Page, I have this…

    …blah…

    …blah…

    — In my CustomScripts.js file I have this…

    alert(‘Found me.’); //Does show.

    function PreSaveAction()
    {
    alert(“Found PreSaveAction.”); //Does NOT show.

    return false;
    }

    — Do you have a solution?

    Please advise.

    Thanks.

    Mark Kamoski.

  3. …looks like my reply above did not allow some HTML code that I had there as an example… so suffice to say… I have used 2 SharePoint:ScriptLink lines in my MasterPage, one pointing to SiteAssets/jquery.js (ver11) and the other pointing to SiteAssets/CustomScripts.js (where my custom code exists for the PreSaveAction which is not firing…

  4. Thanks for the client side rendering validation stuff! Didn’t know it existed. Using JSLink and had a custom button so didn’t know how to validate required fields. This totally makes things easier!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s