title: Check if people picker field is empty with jQuery?
body: <p>I have the following HTML</p>
  
  <pre><code>    &lt;tr&gt;
  &lt;td&gt;
  &lt;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"&gt;
  &lt;/div&gt;
  &lt;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; "&gt;
  &lt;/textarea&gt;&lt;/td&gt;
                              &lt;/tr&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>The current code I have is:</p>
  
  <pre><code>$("input[title=Target Date],input[title=Start Date],select[title=Strategic Objective],select[title=Strategic Priority]").change(function(){
          checkControls()
  });
  </code></pre>
  
  <p>and here I want to add something like 
  ,select[title=Strategic Priority],textarea.ms-input") but it doesn't work, any ideas?</p>
  
  <p>Thanks in advance.</p>
  
  <p>Edit: the code for the validation is:</p>
  
  <pre><code>    //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 &amp;&amp; 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()
      }
  </code></pre>
  
  <p>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?</p>
  
  <p>edit3:</p>
  
  <p>I changed</p>
  
  <pre><code>return (controlsPassed == 5);
  </code></pre>
  
  <p>to</p>
  
  <pre><code>return (controlsPassed == 4) &amp;&amp; ( ($("textarea[title='People Picker'][value!='']").length==1) || $("textarea[title='People Picker'][value!='']").is(":hidden") );
  </code></pre>
  
  <p>But if the People Picker is hidden (.hide()) it still wants to validate it so I thought I could do something like:</p>
  
  <pre><code>if ($("textarea[title='People Picker'][value!='']").is(":hidden")) {
      return (controlsPassed == 4)
  }
  else {
  return (controlsPassed == 4) &amp;&amp; ( ($("textarea[title='People Picker'][value!='']").length==1);
  </code></pre>
  
  <p>but no, any ideas?
      }</p>