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 | |
| } | |
| }); | |
| } |
Hi,
I want people picker must run on client side
Hi, could you please clarify, what would you like to achieve?
I want PeopleEditor Control must run on Client side.
it should be custom control using only HTML and JavaScript there will be NO .cs File
It seems he want a “client version” of PeopleEditor (like the one I described in the last comment, pure html and javascript or something like that). Btw, I have searched MDSN library and found that SharePoint 2013 had included a client people editor, with additional .js files in “_layouts” folder that implement all the business methods (like checking names and validating the editor). I think if we have time to research this, we can imitate a SharePoint 2013-liked people editor as a workaround on SharePoint 2010.
Hi Vadim,
Thanks for you post. I just built a client-side people editor (pure html and javascript based on the course code generated from SharePoint’s PeopleEditor) and want to ask if there is any way to check names from client side (maybe triggering a callback or something), since the function WebForm_DoCallBack requires the event target to implement the ICallbackEventHandler (it can’t be, since it was dynamically generated from javascript).
Thanks.
Hi Serge,
I agree with you, using WebForm_DoCallBack is not an option here since it is ASP.NET control mechanism that is intended for callback events (by implementing ICallbackEventHandler Interface)
In your case i recommend the following approach:
1. Implement check names functionality inside Http Handler (ASHX Page Handler) or Web Service
2. Bind Ajax (jQuery Ajax) call to Check names element click event
P.S. Actually, in my previous post, functionality for loading approver is implemented in similar way as was described above.
Vadim
Pingback: Different ways of extending People Editor in the client side (SharePoint 2010) | Yet Another SharePoint Blog
Hi Thanks for sharing this , can you please show me example how to use this with Jquery validation plugin ?
Thanks