menu

Questions & Answers

Check if people picker field is empty with jQuery?

I have the following HTML

    <tr>
<td>
<div id="ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00_UserField_upLevelDiv" TabIndex="0" onFocusIn="this._fFocus=1;saveOldEntities('ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00_UserField_upLevelDiv')" onClick="onClickRw(true, true);" onChange="updateControlValue('ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00_UserField')" onFocusOut="this._fFocus=0;" onPaste="dopaste();" AutoPostBack="0" class="ms-inputuserfield" onDragStart="canEvt(event);" onKeyup="return onKeyUpRw('ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00_UserField');" onCopy="docopy();" onBlur="updateControlValue('ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00_UserField')" Title="People Picker" onKeyDown="return onKeyDownRw(this, 'ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00_UserField', 3, true, event);" contentEditable="true" style="width: 100%; word-wrap: break-work;overflow-x: hidden; background-color: window; color: windowtext;" name="upLevelDiv">
</div>
<textarea name="ctl00$m$g_c6ae303a_6013_4adb_8057_63a214bcfd24$ctl00$ctl04$ctl08$ctl00$ctl00$ctl04$ctl00$ctl00$UserField$downlevelTextBox" rows="1" cols="20" id="ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00_UserField_downlevelTextBox" class="ms-input" onKeyDown="return onKeyDownRw(this, 'ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00_UserField', 3, true, event);" onKeyUp="onKeyUpRw('ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00_UserField');" Title="People Picker" AutoPostBack="0" style="width:100%;display: none;position: absolute; ">
</textarea></td>
                            </tr>

and I am trying to check whether the people picker field has any value at all but I don't get it to work (can't use the ID attribute to find element), I am not sure which element to check.

The current code I have is:

$("input[title=Target Date],input[title=Start Date],select[title=Strategic Objective],select[title=Strategic Priority]").change(function(){
        checkControls()
});

and here I want to add something like ,select[title=Strategic Priority],textarea.ms-input") but it doesn't work, any ideas?

Thanks in advance.

Edit: the code for the validation is:

    //bind a change event to all controls to validate
    $("input[title=Target Date],input[title=Start Date],select[title=Strategic Objective],textarea[id$=_UserField_downlevelTextBox],select[title=Strategic 

Priority]").change(function(){
        checkControls()
    });

    //the change event function - check the status of each control
    function checkControls(){

    //set a variable to count the number of valid controls
    var controlsPassed = 0;

    //set up a selector to pick .each() of the target controls
    $("input[title=Target Date],input[title=Start Date],select[title=Strategic Objective],textarea[id$=_UserField_downlevelTextBox],select[title=Strategic 

Priority]").each(function(){

        //if the control value is not zero AND is not zero-length
        var val = $(this).val();
        if($(this).is(':hidden') || (val != 0 && val.length != 0)) { 

            //add one to the counter
            controlsPassed += 1;

        }
        });

    //call the PreSaveItem function and pass the true/false statement of 5 valid controls
    return (controlsPassed == 5);

    }

        function PreSaveItem() {
            return checkControls()
    }

edit2: I guess it doesn't work because the other controls have a value attribute. If I insert something in the date fields they get the attribute value="18/08/2010" for example. But with the textarea the html looks like (simplified)values here so how can I check if this is empty or not?

edit3:

I changed

return (controlsPassed == 5);

to

return (controlsPassed == 4) && ( ($("textarea[title='People Picker'][value!='']").length==1) || $("textarea[title='People Picker'][value!='']").is(":hidden") );

But if the People Picker is hidden (.hide()) it still wants to validate it so I thought I could do something like:

if ($("textarea[title='People Picker'][value!='']").is(":hidden")) {
    return (controlsPassed == 4)
}
else {
return (controlsPassed == 4) && ( ($("textarea[title='People Picker'][value!='']").length==1);

but no, any ideas? }

Answers(4) :

Your idea of adding textarea.ms-input is correct - that will cause changes to the textarea's value to get run through the checkControls() method. However, since that's the only method being invoked in your change handler, you would have to perform the empty check in that method, or just before you call it.

You can see how you could check for an empty textarea in this simple example:

$('textarea.ms-input').change(function(){
    if($.trim(this.value) == ''){
        alert("Look maw, no content!");   
    }
});

If your PeopleEditor has an ID of UserField then the below code should be able to select the textarea for you.

$(textarea['id$=_UserField_downlevelTextBox'])

And this snippet below would be what you would have in your code :

$(textarea['id$=_UserField_downlevelTextBox']).change(function(){
        checkControls();
});
Comments:
2023-01-07 20:33:13
For some reason that doesn't work, the page still gets reloaded.
2023-01-07 20:33:13
Are you trying to stop the PeopleEditor from automatically posting back? I don't understand why you said "the page still gets reloaded." There is an AutoPostBack attribute on the PeopleEditor control and setting that to a false would stop the automatic posting back. HTH.
2023-01-07 20:33:13
Sorry I was a bit unclear there. The page reloades when the user hits the submit button even though the people picker field is empty.
 var user = $("#" + '<%= this.MyPPEControl1.ClientID %>').text();    
      var IsValidUser = user.search("@");
      if (IsValidUser > 0)
      {
            $('#' + '<%= this.MyPPEControl1.ClientID %>').css({"border": "", "background": ""  }); 
      }
      else
      {
           $('#' + '<%= this.MyPPEControl1.ClientID %>').css({ "border": "1px solid red", "background": "#FFCECE"
          });       
        return false;
      }   

The people picker first stores the value in hidden field which has a id as id of Userfield + "hiddenSpanData".

Checking this will let you know if the field is empty or not.

e.g.

if($.trim($('input[id$="ff161_ctl00_ctl00_UserField_hiddenSpanData"]').val()) == ""){
    return 'Please enter user name';
}