Overview
Validation of SharePoint PeopleEditor WebControl on the client-side is often required. On server side validation is supported, see AllowEmpty and ValidatorEnabled properties for details, but the lack of client side validation makes it inconvenient for scenarios where client side validation is mandatory. So let’s discuss some techniques how it could be achieved.
Server-Side Validation
In order to enable/disable validation for Entity Editor based controls (like People Editor) the following properties should be specified in combination:
- AllowEmpty – represents whether an empty entity is allowed
- ValidatorEnabled – represents whether a Validator is enabled
For example, the code below demonstrates how to disable empty values:
<wssawc:PeopleEditor | |
AllowEmpty="false" | |
ValidatorEnabled="true" | |
id="userPicker" | |
runat="server" | |
SelectionSet="User,SecGroup" | |
/> |
Client-Side Validation
Let’s start with the simple method that allows to check if PeopleEditor control is not empty.
The code below demonstrates how to validate if SharePoint PeopleEditor control value is not empty
function validateIfPeopleEditorNotEmpty(peId) { | |
var $pe = $("#" + peId); | |
var $peValHolder = $pe.find("input[id$='hiddenSpanData']"); | |
return ($peValHolder.val().length > 0); | |
} |
It can be used in the following scenarios:
- as standalone validation function, i.e. triggered on submit or click events
- with ASP.NET Custom Validator as ClientValidationFunction with some modifications applied.
Since jQuery is commonly used in SharePoint front-end development, it validation capabilities could be used for PeopleEditor, for example jQuery Validation plugin. The code below demonstrates how validation rule that allow us to verify if PeopleEditor value is not empty, may look like.
//People Editor Validator with jQuery Validation plugin | |
function validatePeopleEditor(peId,messageText) | |
{ | |
var $pe = $("#" + peId); | |
var $peValHolder = $pe.find("input[id$='hiddenSpanData']"); | |
$peValHolder.rules("add", { | |
required: true, | |
messages: { | |
required: messageText | |
} | |
}); | |
} |