How to make PeoplePicker a required field?

Question

I have a form with a couple PeoplePickers and I'd like to require the user to make a selection for the people picker, but unlike a text box field, I can't figure out how to require a peoplepicker. Appreciate any help/suggestions...

<div class="form-group row">
    <div class="col-sm-6">
        <label for="peoplePickerUser" class="required">Requestor</label>
        <div id="peoplePickerUser"></div>
    </div>
</div>

function resolvePeoplePicker() {
    var peoplePickerUser= this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerUser_TopSpan;
    this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerUser_TopSpan.OnUserResolvedClientScript = function (peoplePickerId, selectedUsersInfo) {
        ///all kinds of code for finding the id's from the people picker
    }
}

Answer 1

You can check if the people picker field is filled or not on click of your form Submit like below:

var peoplePickerElement = SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerUser_TopSpan;

var usersList = peoplePickerElement.GetAllUserInfo();

if(usersList.length) {
    console.log("Users added");
}
else {
    alert("This field is required!");
    return;
}

If there are no users then you can show some message to add the users in people picker field.

Answer 2

You can use below code.

Note: Here through the line $("[title='Requester']").attr("id"), we are getting th ID of the people picker control whose title is Requester.

So You can Replace Requester with the title of your people picker control. And It will work ..

if(SPClientPeoplePicker.SPClientPeoplePickerDict[$("[title='Requester']").attr("id")].GetAllUserInfo().length == 0){
    // people picker is empty
}else{
    // people picker is NOT empty
}