I want to perform client side validation on people picker where in if the people picker is empty just to show an alert saying it is required. I am aware of java script and j query so if you guys can just drop in an example that would be great.

Thank You,

  • to set focus on the people Picker control : $("input[title='field name']").focus();
    – A.Saéed
    Commented Apr 14, 2018 at 21:05
  • it does not work. i have tried this! Commented Apr 15, 2018 at 7:17
  • It works with me
    – A.Saéed
    Commented Apr 15, 2018 at 8:41
  • i shall try this again then. i am not able to set focus on text area. do you have a solution for that? Commented Apr 15, 2018 at 10:20
  • U can try the same with that too
    – A.Saéed
    Commented Apr 15, 2018 at 11:19

1 Answer 1


You need to make sure that the SharePoint JavaScript file clientpeoplepicker.js is loaded before doing this validation.

Either by adding it as a reference or by loading it before doing the validation.

    var peoplePickerName = "Displayname for your people picker column"; 

    clientPeoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[$('[title="' + peoplePickerName + '"]')[0].id];

    if (clientPeoplePicker.TotalUserCount <= 0) {
//Reversing the condtion for the error. i.e user count less than or equal zero 
        alert("Cannot be empty"); 


To validate the people picker when trying to save the form and show the out of the box error message, we can do it like this:

<script language="javascript" type="text/javascript" src="../_layouts/15/clientpeoplepicker.js"></script>
<script language="javascript" type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    peoplePickerName = "PeoplePickerDisplayName"; 

    clientPeoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[$('[title="' + peoplePickerName + '"]')[0].id];

function PreSaveAction() {

    if (clientPeoplePicker.IsEmpty()) {
        clientPeoplePicker.AutoFillEnabled = true
        clientPeoplePicker.AllowEmpty = false
        clientPeoplePicker.HasInputError = true
        $("input.sp-peoplepicker-editorInput[id^='"+ peoplePickerName +"']").focus();

      return false;
   else {
    return true;
  • i tried this method but it is not working. Do i need to include some files for this to work? I have a jquery min file already included. Do i need another file for it to work ? Commented Apr 13, 2018 at 6:35
  • Apologies, updated my answer. Commented Apr 13, 2018 at 6:41
  • actually i just put in == rather than > and it worked. I also want to know how to bring focus on the people picker field after the alert. Can that be done? Commented Apr 13, 2018 at 6:43
  • Did you work it out? Spent 2 hours going trough how SharePoint validates the control and sets the focus.. Commented Apr 13, 2018 at 9:46
  • yes actually i am able to check the condition for the people picker just change the < sign to == and it checks the people picker. i am still not able to get the focus on people picker. Commented Apr 13, 2018 at 11:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.