Validating a PeopleEditor Control – Second Attempt

This post is an update to a previous post I had written on validating the PeopleEditor control on post back. In that particular post, I described the challenges of getting a PeopleEditor control, within a custom application page, to validate correctly as a required field on the client side (I had server side validation already in place and working correctly).

For the most part, the solution I outlined worked well, except for some situations where other controls on the page were performing their own post back (for example, a data grid in edit mode). I found that on submit of the entire form, the ASP.NET required field validator for the PeopleEditor control would kick in informing me that the field was required. However, there was a valid entry in the control so I could only conclude that the post back by some other control on the page was mucking up the view state for the PeopleEditor control and on submit the form was no longer aware that this field did in fact have a value in it.

The MSDN article found here outlines my problem exactly with the eventual solution further down in the thread. I just wanted to highlight it here because it was exactly what I needed to resolve my issue. Thank you to Jan Lange for posting his solution!

1
2
3
4
5
6
7
8
<script language="javascript">  
    function CheckProjectManager(source, arguments) {  
        if (aspnetForm.ctl00_PlaceHolderMain_ProjectManager_downlevelTextBox.value == "")  
            arguments.IsValid = false;  
        else  
            arguments.IsValid = true;  
    }  
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<SharePoint:PeopleEditor   
                ID="ProjectManager"   
                AllowEmpty="false"   
                ValidatorEnabled="true"   
                MultiSelect="false" 
                runat="server"   
                SelectionSet="User" 
                Width="200px"   
                TabIndex="2" />
 
<asp:CustomValidator  
                ID="rfvProjectManager" 
                runat="server" 
                ControlToValidate="" 
                ErrorMessage="Required" 
                Enabled="true"   
                ClientValidationFunction="CheckProjectManager">  
                </asp:CustomValidator>

Just to outline, what Jan eventually did was create a custom validator that called a javascript function to validate the control. Within that function he checks to see if the control is empty and stores the results of the validation in the IsValid property of the ServerValidateEventArgs object. Notice that he also sets the ControlToValidate property to “”.

Hope this helps!

,

10 Responses to “Validating a PeopleEditor Control – Second Attempt”

  1. Stefan Sainiuc February 15, 2012 at 7:17 am #

    A more useful validation method that works in most browsers would be:

    if (aspnetForm.ctl00_PlaceHolderMain_ProjectManager_hiddenSpanData.value.indexOf(“ms-entity-resolved”) == -1)
    arguments.IsValid = false;
    else
    arguments.IsValid = true;

  2. shereen February 15, 2012 at 9:35 am #

    Thanks Stefan, for other readers, can you detail why that’s ‘more useful’. It’s been a while since I wrote this and can’t recall all the details.

  3. Ricky Mattischeck April 24, 2012 at 6:30 am #

    Hi!

    It’s more useful because a comparison for the value not beeing empty just checks if the user has entered any text. But it doesn’t validates for its correctnes. So your code would set IsValid to the PeopleEditorControl even if you enter “dhajkda”.
    But Stefans code checks for position of a string that’s only added to the control after the “Check names”-button has been hit and the function behind was able to resolve the user-input.

    Example:

    You enter ‘dsaajd’ and hit “check names” <- Stefans code would return -1
    You enter 'domainuser1' (an existing user in your web) <- Stefans code would return 73

    Cheers,
    Ricky

  4. shereen April 25, 2012 at 11:48 am #

    Thanks Ricky, that makes sense. Appreciate the comment!

  5. Haroon Attari April 28, 2015 at 7:59 am #

    Another approach to validate the peoplepicker is to call the validation JavaScript method in ‘onFocusOut’ tag add following line before checking indexOf hidden span data

    $(‘#ctl00_PlaceHolderMain_ProjectManager_checkNames’)[0].click();

    which will perform ‘Check Names’ action and then Stefan’s line of code will return valid/invalid accordingly.

  6. Rashmi May 15, 2015 at 5:39 am #

    Does anyone know how i can make the People Editor field a required field?

  7. Rashmi May 15, 2015 at 6:02 am #

    Sorry, let me rephrase my previous question.
    I have a SharePointWebControls:PeopleEditor field in my SharePoint 2013 Page Layout. In this field I display the name of the user logged in.
    The user is validated and resolved using the code ($(‘#ctl00_PlaceHolderMain_ProjectManager_checkNames’)[0].click();) Haroon had mentioned earlier.
    I then have the asp:CustomValidator. The problem is:
    1. The default user name in the PeoplePicker is not resolved in FireFox, but is resolved in IE.
    2. When I delete the name displayed in the PeoplePicker and move to the next control, no ‘Required’ Error Message is displayed.

    Below is my code:

    $(‘#ctl00_PlaceHolderMain_spPeoplePicker_upLevelDiv’).text($scope.userInfo.DisplayName);
    $(‘#ctl00_PlaceHolderMain_spPeoplePicker_checkNames’)[0].click();

    function CheckProjectManager(source, arguments) {
    if (aspnetForm.ctl00_PlaceHolderMain_spPeoplePicker_hiddenSpanData.value.indexOf(‘ms-entity-resolved’) == -1)
    arguments.IsValid = false;
    else
    arguments.IsValid = true;
    }

    Can someone tell me what I’m doing wrong please?

  8. Rashmi May 15, 2015 at 6:05 am #

    Here’s the aspx:

  9. Rashmi May 15, 2015 at 6:07 am #

    Below is my aspx. I replaced >< with }{ respectively.

    {asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server"}
    {SharePointWebControls:PeopleEditor ID="spPeoplePicker" ValidatorEnabled="True" runat="server" data-ng-model="requesterInfo" SelectionSet="User" AllowEmpty="False" MultiSelect="False" CssClass="peoplePicker"/}
    {asp:CustomValidator
    ID="rfvProjectManager"
    runat="server"
    ControlToValidate=""
    ErrorMessage="Required"
    Enabled="true"
    ClientValidationFunction="CheckProjectManager"}
    {/asp:CustomValidator}
    {/asp:Content}

Trackbacks/Pingbacks

  1. Links (3/8/2009) « Steve Pietrek - Everything SharePoint - March 8, 2009

    […] Validating a PeopleEditor Control – Second Attempt […]

Leave a Reply