onfocus() is working fine in IE but not in Firefox

[sourav08]

Hi,

I have validate a text field with onchange event which throw error message, if
not satisfied the condition and set the mouse cursor on the same field using
document.focus( ).

It is working fine in IE, but when used in Firefox, the mouse cursor is moving to the next text field.

Please let me know the possible solution for the above problem.

Regards and Thanks

Sourav

[acoder]

Post your problem code.

[sourav08]

The below function validates a text field which only accepts space and letters.

[CODE=javascript]function Climit()
{

var find=/[0-9\*\=\_\>\<\:\@ \&\%\?\$\)\(\`\ ~\#\^\|\+\.\,\; \\\}\{\]\[\\"\!\/\-\']/;
var maxchars=20;

if(document.per sonal.person_na me.value.length > maxchars)
{
alert('Too much data in the text box! Please remove '+
(document.perso nal.person_name .value.length - maxchars)+ ' characters');

window.document .personal.perso n_name.focus();
window.document .personal.perso n_name.select() ;
return false;
}


else if(document.per sonal.person_na me.value.search (find)!= -1)
{
alert("Only letters are allowed.");
window.document .personal.perso n_name.focus();
window.document .personal.perso n_name.select() ;
return false;
}
else
return true;
}
[/CODE]
The focus() is working fine in IE but not in Firefox.

Thanks

Sourav

[acoder]

Also post the corresponding HTML code. Please use code tags when posting code (See How to Ask a Question). Thanks!

[sourav08]

[code=html]
<tr>
<td width="133"><di v align="left"><s pan class="style30" >*&nbsp;</span><span class="style26" >Name</span></div></td>
<td width="270" align="left"><i nput type="text" name="person_na me" id="person_name " value="" style=" text-transform: capitalize;" class="blurFiel d" onFocus="if(thi s.value=='Enter Name') this.value=''; this.className= 'focusField'" onBlur="blurCNa me();" onchange="retur n Climit();"></td>

<script language="javas cript">


function blurCName()
{
if(document.per sonal.person_na me.value=='')
{
document.person al.person_name. value='Enter Name';
document.person al.person_name. className='blur Field';
// document.person al.person_name. focus();
//document.person al.person_name. select();
return true;
}
else
//document.person al.person_name. focus();
return false;
}


function Climit()
{
//obj = document.getEle mentById('perso n_name');
//obj.value = (obj.value).rep lace(/^\s+/, '').replace(/\s+$/, '');

var find=/[0-9\*\=\_\>\<\:\@ \&\%\?\$\)\(\`\ ~\#\^\|\+\.\,\; \\\}\{\]\[\\"\!\/\-\']/;
var maxchars=20;

if(document.per sonal.person_na me.value.length > maxchars)
{
alert('Too much data in the text box! Please remove '+
(document.perso nal.person_name .value.length - maxchars)+ ' characters');

window.document .personal.perso n_name.focus();
window.document .personal.perso n_name.select() ;
return false;
}


else if(document.per sonal.person_na me.value.search (find)!= -1)
{
alert("Only letters are allowed.");
window.document .personal.perso n_name.focus();
window.document .personal.perso n_name.select() ;
return false;
}
else
return true;
}

</script>
</tr>[/code]

[acoder]

You have an onchange and an onblur both trying to focus if there's an error. Why not just use just an onchange instead? It's more reliable and user-friendly and less annoying. See if that helps. I take it your form is called "personal", right?

[sourav08]

Hi,
Thanks for ur suggestion.
I have tried the code by omitting onblur event, but the focus problem still persist in Mozilla (when error occurs in the 1st input field).

Thanks & Regards,

Sourav

[acoder]

You will need to use a timeout to allow the focus back to the first field. I'm guessing you're tabbing to test the onchange/onblur. Try:[code=javascript]setTimeout(func tion() {document.perso nal.person_name .focus();},10);[/code]

[sourav08]

Hi,
Thanks for ur suggestion, but in Firefox, onchange event throws the error message using setTimeout and select that input field but focus is not working. In firefox focus can be set to the next field manually while it's not possible in IE.

Regards,
Sourav

[acoder]

Post all of the code or, if possible, a link to a test page.

[sourav08]

[code=php]
<?php
include("../config.php");

include("../session_check.p hp");

$ftchs=mysql_qu ery("select admin_id from admin where admin_id='".$_S ESSION['admin_id']."'")or die('Error'.mys ql_error());

if (isset($_POST['submit']))

{
$contact_no= $_REQUEST['TelCC'].$_REQUEST['TelAC'].$_REQUEST['TelNo'];
$cntc = mysql_query("se lect contact_no from contact_details WHERE
contact_no='$co ntact_no' AND admin_id='".$_S ESSION['admin_id']."'") or die('Error'.mys ql_error());

if(mysql_num_ro ws($cntc)!=0)
{
$duplicate_c="P lease Don't Insert The Same Contact Person Twice";
}

else{
$admin_id=$_SES SION['admin_id'];
$person_name = $_REQUEST['person_name'];
$contact_no = $_REQUEST['TelCC'].$_REQUEST['TelAC'].$_REQUEST['TelNo'];
$alternative_co ntact = $_REQUEST['ATelCC'].$_REQUEST['ATelAC'].$_REQUEST['ATelNo'];
$email_Id = $_REQUEST['email_Id'];
$designation = $_REQUEST['designation'];
$address = $_REQUEST['address'];
$country=$_REQU EST['country'];
$zipcode=$_REQU EST['zipcode'];
$other_details = $_REQUEST['other_details'];
$photo = $_FILES['photo']['name'];


$ins = mysql_query("IN SERT INTO contact_details SET
admin_id = '".$_SESSION['admin_id']."',
person_name='". $person_name."' ,
contact_no='".$ contact_no."',
alternative_con tact='".$altern ative_contact." ',
email_Id='".$em ail_Id."',
designation='". $designation."' ,
address='".$add ress."',
country='".$cou ntry."',
zipcode='".$zip code."',
other_details=' ".$other_detail s."'") or die('Error .'.mysql_error( ));

echo "admin_id=".$ad min_id;

if($_FILES['photo']['size'] >0 )
{
$person_id = mysql_insert_id ();
$photo = $person_id."_". $photo;
copy($_FILES['photo']['tmp_name'], "../pictures/".$photo);
$sql_update ="UPDATE contact_details SET photo='".$photo ."' WHERE person_id='".$p erson_id."'";
mysql_query($sq l_update) or die ('Error '. mysql_error());
}
echo "<script>alert( 'Informations Inserted Successfully'); window.location ='../meeting/meetingdetails. php';</script>";
}
}

?>
[/code]

[code=html]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Personal Document</title>

<link href="../style.css" rel="stylesheet " type="text/css" />

[/code]

[code=javascript]

<script language="javas cript">

function checkin()
{
if (document.perso nal.person_name .value=="" ||document.pers onal.person_nam e.value=="Enter Name")
{
alert("Please Insert Contact Person's Name");
window.document .personal.perso n_name.focus();
window.document .personal.perso n_name.select() ;
return false;
}

if(document.per sonal.TelCC.val ue=="")
{
alert("Please provide correct country code");
window.document .personal.TelCC .focus();
return false;
}

if(document.per sonal.TelAC.val ue=="")
{
alert("Please provide correct area code");
window.document .personal.TelAC .focus();
return false;
}

if(document.per sonal.TelNo.val ue=="")
{
alert("Please provide correct phone number");
window.document .personal.TelNo .focus();
return false;
}


if (document.perso nal.designation .value=="")
{
alert("Please Insert Designation Of the Person")
window.document .personal.desig nation.focus();
window.document .personal.desig nation.select() ;
return false;
}
if (document.perso nal.address.val ue=="")
{
alert("Address Field Should Not Be Blank ")
window.document .personal.addre ss.focus();
window.document .personal.addre ss.select();
return false;
}

if (document.perso nal.country.val ue=="")
{
alert("Country Field Should Not Be Blank ")
window.document .personal.count ry.focus();
//window.document .personal.count ry.select();
return false;
}


fileVal=window. document.person al.photo.value;
if(fileVal != "")
{
ext=fileVal.sub str(fileVal.las tIndexOf(".")). toLowerCase();
if(ext != ".jpeg" && ext != ".jpg" && ext != ".gif" && ext!= ".bmp" )
{
alert("Please select a Specified Image File Type");
window.document .personal.photo .focus();
window.document .personal.photo .select();
return false;
}
}

if (document.perso nal.other_detai ls.value=="")
{
alert("Details About The Person?")
window.document .personal.other _details.focus( );
window.document .personal.other _details.select ();
return false;
}

else
return true;

}
</script>

[/code]

[code=html]

</head>

<body bgcolor="#FFFFF F" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0 ">
<!-- ImageReady Slices (agenda info.psd) -->
<td colspan="8" rowspan="2" width="711" height="470">


<!--<img src="images/agenda-info_15.jpg" width="711" height="470" alt="">-->
<table width="516" height="471" align="center">
<tr>
<td width="508" align="center" valign="top">
<fieldset> <div align="left">
<legend class="style26 style32" style="border:# 135879"><strong >Insert Personal
Details</strong></legend>
</div>
<table width="465" height="326" align="center" border="0">
<form action="" name="personal" method="post" enctype="multip art/form-data" onsubmit="retur n checkin();" >

<tr>
<td width="133"><di v align="left"><s pan class="style30" >*&nbsp;</span><span class="style26" >Name</span></div></td>
<td width="270" align="left"><i nput name="person_na me" type="text" id="person_name " value="<?php echo($_POST['person_name']!=''?$_POST['person_name']:'Enter Name');?>" style=" text-transform: capitalize;" class="blurFiel d" onFocus="if(thi s.value=='Enter Name') this.value=''; this.className= 'focusField'" onBlur="return blurCName()"; onchange="retur n Climit();" > </td>

[/code]

[code=javascript]

<script language="javas cript">


function blurCName()
{
//"
{
obj = document.getEle mentById('perso n_name');

obj.value = (obj.value).rep lace(/^\s+/, '').replace(/\s+$/, '');
}


if(document.per sonal.person_na me.value=='')
{
document.person al.person_name. value='Enter Name';
document.person al.person_name. className='blur Field';
// document.person al.person_name. focus();
//document.person al.person_name. select();
return true;
}
else
//document.person al.person_name. focus();
return false;
}

function Climit()

{ var find=/[0-9\*\=\_\>\<\:\@ \&\%\?\$\)\(\`\ ~\#\^\|\+\.\,\; \\\}\{\]\[\\"\!\/\-\']/;
var maxchars=25;

if(document.per sonal.person_na me.value.length > maxchars)
{
alert('Too much data in the text box! Please remove '+
(document.perso nal.person_name .value.length - maxchars)+ ' characters');
document.person al.person_name. focus();
document.person al.person_name. select();
return false;
}


else if(document.per sonal.person_na me.value.search (find)!= -1)
{
alert("Only letters are allowed.");
document.person al.person_name. focus();
document.person al.person_name. select();
return false;
}
else
return true;
}

</script>

[/code]

[code=html]

</tr>
<tr>
<td><div align="left"><s pan class="style30" >*&nbsp;</span><span class="style26" >Contact No </span></div></td>
<td align="left"><i nput type="text" cols="10" name="TelCC" maxlength="3" class="focusFie ld" value="<?php echo $_POST['TelCC'];?>"style="widt h:24px;" >
-
<input type="text" cols="10" name="TelAC" maxlength="4" class="focusFie ld" value="<?php echo $_POST['TelAC'];?>" style="width:27 px;" >
-
<input type="text" cols="10" name="TelNo" maxlength="12" class="" value="<?php echo $_POST['TelNo'];?>" style="width:90 px;" onChange="retur n cont();" ><div class="style3"> <?php echo $duplicate_c ; ?></div>
<script language="javas cript">
function cont()
{
var find=/[a-zA-Z\`\~\!\@\#\$\% \^\&\*\(\)\-\_\=\+\[\]\{\}\|\\\ \:\;\'\"\<\,\>\ .\/\?]/;

if(document.per sonal.TelNo.val ue!="")
{
if(document.per sonal.TelCC.val ue.search(find) != -1)
{
alert("Country code is not valid.");
document.person al.TelCC.focus( );
document.person al.TelCC.select ();
return false;
}

if(document.per sonal.TelAC.val ue.search(find) != -1)
{
alert("Area code is not valid.");
document.person al.TelAC.focus( );
document.person al.TelAC.select ();
return false;
}
if(document.per sonal.TelNo.val ue.length < 5)
{
alert('Too short data in the text box! Please Insert '+
(5-document.person al.TelNo.value. length )+ ' Digits');
return false;
}

// var iChar="+-";

//alert (i);
if(document.per sonal.TelNo.val ue.search(find) != -1)
{
alert("Only DIGITS are allowed.");
document.person al.TelNo.focus( );
document.person al.TelNo.select ();
return false;
}
re = /[0-9]/;
if(!re.test(doc ument.personal. TelNo.value))
{
alert("Error: Phone number must contain at least one number (0-9)!");
document.person al.TelNo.focus( );
return false;
}
//if (iChar.indexOf( document.person al.s_address.va lue.charAt(i))= = -1)
var ichar="+-";
var num=0;
//var arr= new array[];

for (var i = 0; i < document.person al.TelNo.value. length; i++)
{
if(ichar.indexO f(document.pers onal.TelNo.valu e.charAt(i))!= -1)
{
num=num+1;

//alert(num);
}
}
if(num>3)
{
alert ("You can't insert more than 3 special characters");
document.person al.TelNo.focus( );
document.person al.TelNo.select ();
return false;

}

}


}

</script> </td>
</tr>
<tr>
<td><div align="left"><s pan class="style26" >&nbsp;&nbsp;Al ternative Contact </span></div></td>
<td align="left"><i nput type="text" cols="10" name="ATelCC" maxlength="3" class="focusFie ld" value="<?php echo $_POST['ATelCC'];?>"style="widt h:24px;">
-
<input type="text" cols="10" name="ATelAC" maxlength="4" class="focusFie ld" value="<?php echo $_POST['ATelAC'];?>" style="width:27 px;">
-
<input type="text" cols="10" name="ATelNo" maxlength="12" class="" value="<?php echo $_POST['ATelNo'];?>"style="widt h:90px;" onChange="retur n acont();">
<script language="javas cript">
function acont()
{
var find=/[a-zA-Z\`\~\!\@\#\$\% \^\&\*\(\)\-\_\=\+\[\]\{\}\|\\\ \:\;\'\"\<\,\>\ .\/\?]/;

if(document.per sonal.ATelNo.va lue!="")
{
if(document.per sonal.ATelCC.va lue.search(find )!= -1)
{
alert("Country code is not valid.");
document.person al.ATelCC.focus ();
document.person al.ATelCC.selec t();
return false;
}

if(document.per sonal.ATelAC.va lue.search(find )!= -1)
{
alert("Area code is not valid.");
document.person al.ATelAC.focus ();
document.person al.ATelAC.selec t();
return false;
}
if(document.per sonal.ATelNo.va lue.length < 5)
{
alert('Too short data in the text box! Please Insert '+
(5-document.person al.ATelNo.value .length )+ ' digits');
return false;
}

// var iChar="+-";

//alert (i);
if(document.per sonal.ATelNo.va lue.search(find )!= -1)
{
alert("Only DIGITS are allowed.");
document.person al.ATelNo.focus ();
document.person al.ATelNo.selec t();
return false;
}


re = /[0-9]/;
if(!re.test(doc ument.personal. ATelNo.value))
{
alert("Error: Phone number must contain at least one number (0-9)!");
document.person al.ATelNo.focus ();
return false;
}
//if (iChar.indexOf( document.person al.s_address.va lue.charAt(i))= = -1)
var ichar="+-";
var num=0;
//var arr= new array[];

for (var i = 0; i < document.person al.ATelNo.value .length; i++)
{
if(ichar.indexO f(document.pers onal.ATelNo.val ue.charAt(i))!= -1)
{
num=num+1;

//alert(num);
}
}
if(num>3)
{
alert ("You can't insert more than 3 special characters");
document.person al.ATelNo.focus ();
document.person al.ATelNo.selec t();
return false;

}


}


}

</script> </td>
</tr>
<tr>
<td><div align="left"><s pan class="style26" >&nbsp;&nbsp;Em ail-Id</span></div></td>
<td align="left"><i nput name="email_Id" type="text" id="email_Id" onchange="javas cript:return email('personal ','email_Id');" >
<script language="javas cript">

function email(personal, email_Id) {

var reg = /^[_a-zA-Z0-9-]+(\.[_a-zA-Z0-9-]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.[A-Za-z]{2,6})$/;
var address = document.forms[personal].elements[email_Id].value;
if(reg.test(add ress) == false) {
alert('Invalid Email Address');
return false;
}
}
</script> </td>
</tr>
<tr>
<td><div align="left"><s pan class="style30" >*&nbsp;</span><span class="style26" >Designation</span></div></td>
<td align="left">&n bsp; </td>
<script language="javas cript">

function desig()

{
obj = document.getEle mentById('desig nation');
obj.value = (obj.value).rep lace(/^\s+/, '').replace(/\s+$/, '');

var find=/[0-9\*\=\_\>\<\:\@ \&\%\?\$\`\~\#\ ^\|\+\.\,\;\\\} \{\]\[\\"\!\/\']/;

if(document.per sonal.designati on.value.search (find)!= -1)
{
alert("Only letters are allowed.")
setTimeout("doc ument.personal. designation.foc us()",1);
//document.person al.designation. select();
setTimeout("doc ument.personal. designation.sel ect()",1);
return false;
}
else
return true;
}

</script>
</tr>

<tr>
<td><div align="left"><s pan class="style30" >*&nbsp;</span><span class="style26" >Address</span></div></td>
<td align="left"><s pan class="style11" >
<textarea name="address" rows="3" id="address" cols="35" onchange="retur n cadress();"></textarea>
</span></td>
<script language="javas cript">
function cadress()
{
var find=/[~\`\!\$\%\^\|\\ \{\}\?\<\>\[\]\"\'\_\+]/;
var maxchar=100;
{
obj = document.getEle mentById('addre ss');

obj.value = (obj.value).rep lace(/^\s+/, '').replace(/\s+$/, '');
}
if(document.per sonal.address.v alue!="")
{
if(document.per sonal.address.v alue.length > maxchar)
{
alert('Too much data in the text box! Please remove '+
(document.perso nal.address.val ue.length - maxchar)+ ' characters');
return false;
}


else if(document.per sonal.address.v alue.search(fin d)!= -1)
{
alert("Only letters are allowed.");
document.person al.address.focu s();
document.person al.address.sele ct();
return false;
}

else
{
return true;
}


}

}

</script>
</tr>
<tr>
<td><div align="left"><s pan class="style30" >*&nbsp;</span><span class="style26" >Country</span></div></td>
<td align="left"><s elect name="country" style="color:#0 00000; border: 1 solid #000000" id="country" >
<option value="">-------SELECT--------</option>
<?php
$all_country = mysql_query("SE LECT country from country") or die('Error :' . mysql_error());

while($country_ val = mysql_fetch_arr ay($all_country ))
{

?>
<option value="<?php echo $country_val['country'];?>" <?php echo($_POST['country']==$country_val['country']?'selected':'') ?>><?php echo $country_val['country'];?></option>
<?php

}
?>
</select></td>
</tr>
<tr>
<td><div align="left"><s pan class="style26" >&nbsp;&nbsp;Zi p Code</span></div></td>
<td align="left"><i nput name="zipcode" type="text" id="zipcode" onchange="retur n zipnumb();">
<script language="javas cript">
function zipnumb()
{
var num;
num=document.pe rsonal.zipcode. value;
var find=/[a-zA-Z\*\ \=\_\>\<\:\@\&\ %\?\$\)\(\|\~\` \!\#\^\]\[\}\{\,\.\;\'\"\ +\-\\\/]/;
if (num.search(fin d)!= -1)
{
alert("That is not a valid zipcode Please enter again.");
document.person al.zipcode.focu s();
document.person al.zipcode.sele ct();
return false;
}
else if(document.per sonal.zipcode.v alue.length > 15 ||document.pers onal.zipcode.va lue.length < 5)
{
alert("It cannot be more than 15 digit and less than 5 digit");
document.person al.zipcode.focu s();
document.person al.zipcode.sele ct();
return false;
}
else

return true;


}
</script>
<span class="style33" >&nbsp;(e.g. 100001)</span></td>
</tr>
<tr>
<td><div align="left"><s pan class="style26" >&nbsp;&nbsp;Ph oto</span></div></td>
<td align="left"><i nput name="photo" type="file"></td>
</tr>
<tr>
<td><div align="left"><s pan class="style30" >*&nbsp;</span><span class="style26" >Details</span></div></td>
<td align="left"><s pan class="style11" >
<textarea name="other_det ails" id="other_detai ls" rows="9" cols="37" onchange="retur n gap();"></textarea>
</span>

<script language="javas cript">
function gap()
{
obj = document.getEle mentById('other _details');

obj.value = (obj.value).rep lace(/^\s+/, '').replace(/\s+$/, '');
}
</script> </td>
</tr>
<tr>
<td><div align="center"> <span class="style16" ></span></div></td>
<td><span class="style13" >
<input type="submit" name="submit" value="Insert">
<input type="reset" nmae="reset" value="Reset">
</span></td>
</tr>
</form>
</table>
</fieldset>
</td>
</tr>
</table>
</td>

<!-- End ImageReady Slices -->
</body>
</html>
[/code]

[acoder]

Thanks for using code tags. Unfortunately, you used the wrong type. Check the reply guidelines on the right-hand side to see how they should look, or use the # button which should wrap your code using the proper tags.

[acoder]

Try increasing the timeout, e.g.[code=javascript]setTimeout(func tion() {document.perso nal.person_name .focus();},50);
setTimeout(func tion() {document.perso nal.person_name .select();},50) ;[/code]

[sourav08]

Hi,
Thanks again for ur reply.

Hi,
I have tried the setTimeout function but what happened in Mozilla, it selects the text box value after showing error message but mouse cursor can be moved to the next field which is not occuring in IE.

Thanks & Regards,

Sourav

[acoder]

The probable reason for that is that the onchange doesn't fire the next time because nothing has changed, so you could use onblur. However, it's much better to highlight the field and put a message next to the field using the DOM rather than using alerts onblur (which can sometimes fire unexpectedly).