Solved

Check if people picker field is empty with jQuery?

Posted on 2010-08-15
29
6,202 Views
Last Modified: 2012-05-10
Hi,

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.
0
Comment
Question by:msgl
  • 15
  • 14
29 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 33443002
You may use find : http://api.jquery.com/find/
$("body").find("select[title='Strategic Priority']").change(function() {
  alert("changed !");
})

Open in new window

0
 

Author Comment

by:msgl
ID: 33445579
the current code I have works:

//bind a change event to all controls to validate
      $("input[title=Target Date],input[title=Start Date],select[title=Strategic Objective],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],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 showHide function and pass the true/false statement of 5 valid controls
      return (controlsPassed == 4);
      }

          function PreSaveItem() {
                return checkControls()
         }

bu when I try to validate the poeple picker field as well it doesn't do it. I change return (controlsPassed
== 4); to (controlsPassed == 5); and then on:
      $("input[title=Target Date],input[title=Start Date],select[title=Strategic Objective],select[title=Strategic Priority],textarea.ms-input").each(function()

and

      $("input[title=Target Date],input[title=Start Date],select[title=Strategic Objective],select[title=Strategic Priority],textarea.ms-input").change(function()

but it doesn't validate the people picker. I also try with the ID even though I don't want to use it later but it still doesn't work.




//bind a change event to all controls to validate

	$("input[title=Target Date],input[title=Start Date],select[title=Strategic Objective],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],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 showHide function and pass the true/false statement of 5 valid controls

	return (controlsPassed == 4);

	}



    	function PreSaveItem() {

    		return checkControls()

   	}

Open in new window

0
 

Author Comment

by:msgl
ID: 33460761
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)<textarea>value here</textarea> so how can I check if this is empty or not?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33460788
$("textarea").html().length return the length of the text inside
0
 

Author Comment

by:msgl
ID: 33461064
Thanks,

So what is the best way to check if it's empty or not with the other controls?
something like
if ($(this).is(':hidden') || (val != 0 && val.length != 0) || (textarea[title=People Picker].html().text() != '')){
?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33461082
Use :
($("textarea[title='People Picker']").text().length!= 0)
or :
($("textarea[title='People Picker']").html().length != 0)

not both : (textarea[title=People Picker].html().text() != '')

don't forget the $, put attribute value in quote 'People Picker' and close the parenthesis ;-)
0
 

Author Comment

by:msgl
ID: 33461104
thanks for that,

yeah I saw that I forgot the $. THis is my code now but  the page still reloads if I hit the submit button:
How do I edit the lines with .change and each. when I look up the other names by title and not check the lenght there?

      $("input[title=Target Date],input[title=Start Date],select[title=Strategic Objective],textarea[title=People Picker],select[title=Strategic Priority]").change

(function(){
            checkControls()
      });

and


      $("input[title=Target Date],input[title=Start Date],select[title=Strategic Objective],textarea[title=People Picker],select[title=Strategic Priority]").each

(function(){
//bind a change event to all controls to validate
	$("input[title=Target Date],input[title=Start Date],select[title=Strategic Objective],textarea[title=People Picker],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[title=People Picker],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) || ($("textarea[title='People Picker']").text().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()
   	}

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 33461131
>but  the page still reloads if I hit the submit button

Use event.preventDefault : http://api.jquery.com/event.preventDefault/

>How do I edit the lines with .change and each. when I look up the other names by title and not check the lenght there?

You may use three statement, one for input, one for select and one for textarea
0
 

Author Comment

by:msgl
ID: 33461141
with sharepoint I have to send a false statement to the PreSaveItem function (a default function to all submit buttons) to not reload the page.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33461234
check this :


//the change event function - check the status of each control
	function checkControls(){
		return ( $("input[title='Target Date'][value!=''],input[title='Start Date'][value!=''],select[title='Strategic Objective'][value!=''],select[title='Strategic Priority'][value!=''],textarea[title='People Picker'][value!='']").length == 5 );
	}

Open in new window

0
 

Author Comment

by:msgl
ID: 33461257
//bind a change event to all controls to validate
      $("input[title=Target Date],input[title=Start Date],select[title=Strategic Objective],textarea[title=People Picker],select[title=Strategic Priority]").change

(function(){
            checkControls()
      });
      //the change event function - check the status of each control
            function checkControls(){
            return ( $("input[title='Target Date'][value!=''],input[title='Start Date'][value!=''],select[title='Strategic Objective'][value!=''],select[title='Strategic Priority'][value!=''],textarea[title='People Picker'][value!='']").length == 5 );
      }
}
          function PreSaveItem() {
                return checkControls()
         }


Or

//bind a change event to all controls to validate
      $("input[title=Target Date],input[title=Start Date],select[title=Strategic Objective],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],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 showHide function and pass the true/false statement of 5 valid controls
            return ( $("input[title='Target Date'][value!=''],input[title='Start Date'][value!=''],select[title='Strategic Objective'][value!=''],select[title='Strategic Priority'][value!=''],textarea[title='People Picker'][value!='']").length == 5 );
      }
          function PreSaveItem() {
                return checkControls()
         }

Both of the examples above causes the script to break.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33461272
You set a flag and not return

So when it's time to send true or false to PreSaveItem you use the flag
$(document).ready(function() {
		//bind a change event to all controls to validate
		$("input[title=Target Date],input[title=Start Date],select[title=Strategic Objective],textarea[title=People Picker],select[title=Strategic Priority]").change(function() {
			flag = (  $("input[title='Target Date'][value!=''],input[title='Start Date'][value!=''],select[title='Strategic Objective'][value!=''],select[title='Strategic Priority'][value!=''],textarea[title='People Picker'][value!='']").length == 5 );
		});
	});

	var flag = false;
	function PreSaveItem() {
		return flag;
	}

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 33461276
Or why not :



$(document).ready(function() {
	});

	function PreSaveItem() {
		return (  $("input[title='Target Date'][value!=''],input[title='Start Date'][value!=''],select[title='Strategic Objective'][value!=''],select[title='Strategic Priority'][value!=''],textarea[title='People Picker'][value!='']").length == 5 );
	}

Open in new window

0
 

Author Comment

by:msgl
ID: 33461287
the page still gets reloaded if I haven't filled out any fields and hit the submit button.
The reason why I have
if($(this).is(':hidden') || (val != 0 && val.length != 0)) {
is because depending on what I select in a dropdown list some elements gets hidden and I don't want to validate these.
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 82

Expert Comment

by:leakim971
ID: 33461320
hidden ? visibility ? or input type ?
0
 

Author Comment

by:msgl
ID: 33461332
If I select a certain item in the Strategic Objective dropdown list I hide for example the Start Date and Target Date fields. If I select anoter item I set them to be visible (.show())

If they are hidden I don't want to validate them, if they are visible I want to validate them.

It all works fine it's just that I can't get it to validate the people picker field. So in the code I posted I need to check if the textarea with title People Picker has lenght > 0 between <textarea> and </textarea>.
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 33461356
from your first code , line 24, replace : return (controlsPassed == 4);

by :

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

0
 
LVL 82

Expert Comment

by:leakim971
ID: 33461368
if People Picker can be hidden :


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

Open in new window

0
 

Author Comment

by:msgl
ID: 33461397
That works, sort of, if I type my name and fill out the other fields nothing happens when I click the submit button. However, If I type my name and click the "Check Name" icon next to the field my name gets an underline in the textarea and then I can click the submit button.

It'll do for now but if you have any idea on how to change the code so it checks for any changes in the textarea please let me know. I should be able to type my name correctly and then hit Submit, without having to click the Check Name button.

Thanks anyway.
0
 

Author Comment

by:msgl
ID: 33461430
hmm maybe I was to fast there
If I use
return (controlsPassed == 4) && ( ($("textarea[title='People Picker'][value!='']").length==1) || $("textarea[title='People Picker'][value!='']").is(":hidden") );
and the poeple picker field is hidden I can't submit the form :(
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33461448
to know if the code update(change) the textarea you need to save its value at page load :

< script language="javascript">
var oldTextAreaValue;
$(document).ready(function() {
        oldTextAreaValue = $("textarea[title='People Picker']").val();

then you can check :

function PreSaveItem() {
    return (controlsPassed == 4) && ($("textarea[title='People Picker'][value!='']").length==1) && ($("textarea[title='People Picker']").val() != oldTextAreaValue);

Another method is to attach keyup to the field : http://api.jquery.com/keyup/

$("textarea[title='People Picker']").keyup(function() { flagTextAreaValueModified = true; });
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33461476
>and the poeple picker field is hidden I can't submit the form :(

Read this : http://api.jquery.com/hidden-selector/

Could you confirm the textarea is hidden (css visibility) or not displayed (css display)

Sorry, I'm going to sleep, see you later for sure!
0
 

Author Comment

by:msgl
ID: 33461484
I hide it with
$('nobr:contains("Assigned To")').closest('tr').hide();

thanks & good night
0
 

Author Comment

by:msgl
ID: 33461592
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
0
 

Author Comment

by:msgl
ID: 33461713
The people picker is not hidden (.hide()) by default so probably that's the problem, when I hid it the function still thinks it's visible.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33464635
Perhaps it's because you hide the closest tr and not itslef so try :


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

Open in new window

0
 

Author Comment

by:msgl
ID: 33470756
Hi leakim,

I posted a question about the people picker on microsoft's msdn forum and got this reply:
"Just to clarify, the textarea that is rendered by the people picker control will always be hidden, regardless of the visibility of the people picker on the page.

When you type into the people picker (On IE anyway), you are typing into a div with contentEditable="true", not into the textarea itself.

The textarea is just a control that is used by the people picker to store the data (and send it back to the server). Some fancy javascript behind the scenes works to keep the textarea updated when users are added to the picker.

Therefore, if you are basing your validation on hidden/visible controls, then you might want to check the visibility of the div for the people picker, not the textarea."

So I check the div instead:
return (controlsPassed == 4) && ( ($("textarea[title='People Picker'][value!='']").length==1) || $('#ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_UserField_upLevelDiv').is(":hidden") );

and it works apart form the issue with having to click the Check Name button.

<TD valign="top" class="ms-formbody" width="400px">
            <!-- FieldName="Assigned To"
                   FieldInternalName="AssignedTo"
                   FieldType="SPFieldUser"
              -->
                  <span dir="none">
            <input name="ctl00$m$g_$ctl00$HiddenUserFieldValue" type="hidden" id="ctl00_m_g____HiddenUserFieldValue" />
            <span id="ctl00_m_g____UserField" class="ms-usereditor" NoMatchesText="<No Matching Names>" MoreItemsText="More Names..." RemoveText="Remove" value="" allowEmpty="1" ShowEntityDisplayTextInTextBox="0" EEAfterCallbackClientScript=""><input name="ctl00$m$g_$ctl00$UserField$hiddenSpanData" type="hidden" id="ctl00_m_g____UserField_hiddenSpanData" /><input name="ctl00$m$g_$ctl00$UserField$OriginalEntities" type="hidden" id="ctl00_m_g____UserField_OriginalEntities" value="<Entities />" /><input name="ctl00$m$g_$ctl00$UserField$HiddenEntityKey" type="hidden" id="ctl00_m_g____UserField_HiddenEntityKey" /><input name="ctl00$m$g_$ctl00$UserField$HiddenEntityDisplayText" type="hidden" id="ctl00_m_g____UserField_HiddenEntityDisplayText" /><table id="ctl00_m_g____UserField_OuterTable" class="ms-usereditor" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;">
                              <tr valign="bottom">

                                    <td valign="top" style="width:90%;"><table cellpadding="0" cellspacing="0" border="0" style="width:100%;table-layout:fixed;">
                                          <tr>
                                                <td><div id="ctl00_m_g____UserField_upLevelDiv" name="upLevelDiv" class="ms-inputuserfield" TabIndex="0" style="display: none;position: absolute; " AutoPostBack="0"></div><textarea name="ctl00$m$g_$ctl00$UserField$downlevelTextBox" rows="1" cols="20" id="ctl00_m_g____UserField_downlevelTextBox" class="ms-input" onKeyDown="return onKeyDownRw(this, 'ctl00_m_g____UserField', 3, true, event);" onKeyUp="onKeyUpRw('ctl00_m_g____UserField');" Title="People Picker" AutoPostBack="0" style="width:100%;wordwrap: break-word;"></textarea></td>
                                          </tr>
                                    </table></td><td align="right" valign="top" nowrap="true" style="padding-left:5px;"><a id="ctl00_m_g____UserField_checkNames" title="Check Names" onclick="var arg=getUplevel('ctl00_m_g____UserField');var ctx='ctl00_m_g____UserField';EntityEditorSetWaitCursor(ctx);WebForm_DoCallback('ctl00$m$g_$ctl00$UserField',arg,EntityEditorHandleCheckNameResult,ctx,EntityEditorHandleCheckNameError,true);return false;" href="javascript:"><img title="Check Names" src="/_layouts/images/checknames.gif" alt="Check Names" style="border-width:0px;" /></a>&nbsp;<a id="ctl00_m_g____UserField_browse" accesskey="B" title="Browse" onclick="__Dialog__ctl00_m_g____UserField(); return false;" href="javascript:"><img title="Browse" src="/_layouts/images/addressbook.gif" alt="Browse" style="border-width:0px;" /></a></td>
                              </tr>


Anyway, I have already accepted your answer as  the solution so I'll try on my own and then post a new qustion if I need more help.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33471457
lol I understand now. What we see is not a textarea... lol because similar for CKEditor : http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26408514.html

to test if the div is hidden :

$("textarea[title='People Picker'][value!='']").parents("div:hidden")
0
 

Author Comment

by:msgl
ID: 33471638
yeah so I check if the div is hidden instead and it works. I still have the problem with having to click the Check Name button though. If I enter something in the field and check the generated source I can see that the value is stored in "<input value="the name here" name="ctl00$m$g_c6ae303a_6013_4adb_8057_$ctl00$UserField$hiddenSpanData" id="ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_UserField_hiddenSpanData" type="hidden">"

So i check if that element has a value or not but it's always hidden and if I select one of the items in a dropdown list it shouldn't check this value.


I tried to start over with something like:
            $("select[title='Item Level']").change(function() {
            var itemLevel = $(this).val();            
            if (itemLevel == "Strategic Objective") {
            alert("objective");
                  $("input[id$=UserField_hiddenSpanData]").change(function(){
                  checkControls();
                  alert("checkcontrols");
                  });

                  function checkControls(){
                  $("input[id$=UserField_hiddenSpanData]").each(function(){
                  var txt = $('#ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_ctl00_UserField_hiddenSpanData').val();
                  alert(txt);      
                  });
            

            function PreSaveItem() {
                  return checkControls();
            }


            }

            }
            if (itemLevel == "Strategic Priority") {
alert("priority");
            }
            if (itemLevel == "Milestone Action") {
alert("action");
            }
            if (itemLevel == "Performance Measure") {
alert("measure");
            }

            });


I get the alerts with the value for the selected item in the drop down but the rest doesn't work.
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now