select dynamic textbox data

This is probably something simple I am missing.  I'm trying to create a validation checker for multiple elements.  I want to pass the element name into the function in javascript and if it doesn't pass the validation I want it to focus on the element and highlight the data in the element that is incorrect.  I want this done either onblur or onchange.

I haven't included all of the functions because the rest of it works.  In the javascript function the alert fires, but the focus and select do not.  it leaves the focus on the next element if you tab out or whatever element you click on next.
javascript:
function ValidateDate(varID)
{
alert('Please input a proper date with slashes');
var MyTextBox = document.getElementById(varID);
MyTextBox.focus();
MyTextBox.select();
///I've also tried this:
alert('Please input a proper date with slashes');
document.getElementById(varID).focus();
document.getElementById(varID).select();
}
 
HTML:
<form id="AddNewEmployeeform" >
    <input class="required" type="text" id="DateOfBirthTxt" name="DateOfBirthText" size="10" onchange="ValidateDate('DateOfBirthTxt');" />
</form>

Open in new window

LVL 9
CCSOFlagAsked:
Who is Participating?
 
kadabaConnect With a Mentor Commented:
have coded a sample.

do check it

<html>
<head>
<script type="text/javascript">
function ValidateDate(varID)
{
	var MyTextBox = document.getElementById(varID);
	if(MyTextBox.value=="")
	{
		MyTextBox.defaultClassName = MyTextBox.className;
		MyTextBox.className = "error";
	}
	else
	{
		MyTextBox.className = MyTextBox.defaultClassName;
	}
}
</script> 
<style type="text/css">
.error
{
	background-color:yellow;
}
</style>
</head>
<body>
<form id="AddNewEmployeeform" >
    Date of Birth : <input class="required" type="text" id="DateOfBirthTxt" name="DateOfBirthText" size="10" onblur="ValidateDate('DateOfBirthTxt');" />
	<br>
	Age : <input class="required" type="text" id="AgeText" name="AgeText" size="3" onblur="ValidateDate('AgeText');" />
</form>
</body>
</html>

Open in new window

0
 
CCSOFlagAuthor Commented:
Hmmm, so if I activate the function onload in the body tag it works.  Can you not do this with onblur or onchange?
0
 
kadabaCommented:
my suggestion:

do not force the user to fill a field. You could have a two stage validation once on blur and then before the submission.

If done on blur since you are focusing back to the text box you could create an loop of alerts.
0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
CCSOFlagAuthor Commented:
Your suggestion works, but that's definitely not what I'm trying to do.  If I have to I guess I will just turn to a more complicated onsubmit validation, which is what I normally do.  I just didn't see why this wouldn't/shouldn't work.

Is there a particular reason why it won't allow focus on an onblur/onchange action?  Theoretically it shouldn't loop if it focuses back on that element.
0
 
kadabaConnect With a Mentor Commented:
What you are saying is true.

I will elaborate further. say you kick in some validation onblur.
in the example code , I have two text boxes which will be validated on blur. Now focus on the first text box and then focus on the second text box.(before testing this make sure you are opening the html is a new window)

what will happen is when the focus is lost on the first text box i.e. on blur the validation will kick in, but then we have focused on second text box. as a result of focus shift back to first validation will kick in the second and the process continues...

onchange validation will kick in only if there is a change in the value in the text box. say validation kicks in and the focus is back but if there is no change in the value the validation will not kick in again.

I hope you got it.

<html>
<head>
<script type="text/javascript">
function ValidateDate(varID)
{
	var MyTextBox = document.getElementById(varID);
	alert("in function: Id of the text box in validation:"+MyTextBox.id);
	MyTextBox.focus();
}
</script> 
</head>
<body>
<form id="AddNewEmployeeform" >
    Date of Birth : <input class="required" type="text" id="DateOfBirthTxt" name="DateOfBirthText" size="10" onblur="ValidateDate('DateOfBirthTxt');" />
	<br>
	Age : <input class="required" type="text" id="AgeText" name="AgeText" size="3" onblur="ValidateDate('AgeText');" />
</form>
</body>
</html>

Open in new window

0
 
CCSOFlagAuthor Commented:
Ah, ok, that makes sense,but it doesn't loop for me.  It never focuses on the specified element.  It stays on the next element.  It validates, but doesn't focus.
0
 
CCSOFlagAuthor Commented:
oh, It does focus in IE now, but not in FF...  I use FF mainly.  Is this possibly a catch Firefox has to prevent loops?
0
 
kadabaConnect With a Mentor Commented:
No not really. FF takes some time to focus back to the window after the alert is shown.
If you are going ahead with the code.. make sure of the looping of alerts.



<html>
<head>
<script>
function validate(eleId) 
{	
	alert("validating element with Id:"+eleId);
	var ele = document.getElementById(eleId);
	setTimeout(function(){ele.focus();ele.select();},100);
} 
</script>
</head>
<body>
<form>
Age:<input name="age" id="age" type="text" onblur="validate('age')">
Name:<input name="nam" id="nam" type="text" onblur="validate('nam')">
</form>
</body>
</html>

Open in new window

0
 
CCSOFlagAuthor Commented:
Thanks, I think I'll use some of what you gave and change a bit myself.  Appreeciate the info.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.