[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 462
  • Last Modified:

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

0
CCSOFlag
Asked:
CCSOFlag
  • 5
  • 4
3 Solutions
 
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
 
kadabaCommented:
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
kadabaCommented:
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
 
kadabaCommented:
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now