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.

function Climit()
 { 
 
 var find=/[0-9\*\=\_\>\<\:\@\&\%\?\$\)\(\`\~\#\^\|\+\.\,\;\\\}\{\]\[\\"\!\/\-\']/;
   var maxchars=20;
 
 if(document.personal.person_name.value.length > maxchars) 
 {
   alert('Too much data in the text box! Please remove '+
    (document.personal.person_name.value.length - maxchars)+ ' characters');
 
            window.document.personal.person_name.focus();
            window.document.personal.person_name.select();
   return false;
    }
 
 
 else if(document.personal.person_name.value.search(find)!= -1)
        {
            alert("Only letters are allowed.");
            window.document.personal.person_name.focus();
            window.document.personal.person_name.select();
            return false;
        }
        else
   return true; 
 }
 

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]

<tr>
    <td width="133"><div align="left"><span class="style30">*&nbsp;</span><span class="style26">Name</span></div></td>
    <td width="270" align="left"><input type="text" name="person_name" id="person_name"  value="" style=" text-transform: capitalize;" class="blurField" onFocus="if(this.value=='Enter Name') this.value=''; this.className='focusField'" onBlur="blurCName();" onchange="return Climit();"></td> 
 
<script language="javascript">
 
 
function blurCName()
{   
  if(document.personal.person_name.value=='')
 {
   document.personal.person_name.value='Enter Name';
  document.personal.person_name.className='blurField';
 // document.personal.person_name.focus();
  //document.personal.person_name.select();
    return true;
  }
  else
        //document.personal.person_name.focus();
  return false;
}
 
 
function Climit()
 { 
     //obj = document.getElementById('person_name');
    //obj.value = (obj.value).replace(/^\s+/, '').replace(/\s+$/, '');
 
 var find=/[0-9\*\=\_\>\<\:\@\&\%\?\$\)\(\`\~\#\^\|\+\.\,\;\\\}\{\]\[\\"\!\/\-\']/;
   var maxchars=20;
 
 if(document.personal.person_name.value.length > maxchars) 
 {
   alert('Too much data in the text box! Please remove '+
    (document.personal.person_name.value.length - maxchars)+ ' characters');
 
            window.document.personal.person_name.focus();
            window.document.personal.person_name.select();
   return false;
    }
 
 
 else if(document.personal.person_name.value.search(find)!= -1)
        {
            alert("Only letters are allowed.");
            window.document.personal.person_name.focus();
            window.document.personal.person_name.select();
            return false;
        }
        else
   return true; 
 }
 
</script> 
</tr>

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

setTimeout(function() {document.personal.person_name.focus();},10);

[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]

<?php
include("../config.php");
 
include("../session_check.php");
 
$ftchs=mysql_query("select admin_id from admin where admin_id='".$_SESSION['admin_id']."'")or die('Error'.mysql_error());
 
if (isset($_POST['submit']))
 
    {  
       $contact_no= $_REQUEST['TelCC'].$_REQUEST['TelAC'].$_REQUEST['TelNo'];
       $cntc = mysql_query("select contact_no from contact_details WHERE 
       contact_no='$contact_no' AND admin_id='".$_SESSION['admin_id']."'") or die('Error'.mysql_error());
 
                  if(mysql_num_rows($cntc)!=0)
                    {
                      $duplicate_c="Please Don't Insert The Same Contact Person Twice";
                    }
 
        else{
          $admin_id=$_SESSION['admin_id'];
          $person_name = $_REQUEST['person_name'];
          $contact_no = $_REQUEST['TelCC'].$_REQUEST['TelAC'].$_REQUEST['TelNo'];
          $alternative_contact = $_REQUEST['ATelCC'].$_REQUEST['ATelAC'].$_REQUEST['ATelNo'];
          $email_Id = $_REQUEST['email_Id'];
          $designation = $_REQUEST['designation'];
          $address = $_REQUEST['address'];
          $country=$_REQUEST['country'];
          $zipcode=$_REQUEST['zipcode']; 
          $other_details = $_REQUEST['other_details'];
          $photo = $_FILES['photo']['name'];
 
 
          $ins = mysql_query("INSERT INTO contact_details SET
          admin_id = '".$_SESSION['admin_id']."', 
          person_name='".$person_name."',
          contact_no='".$contact_no."',
          alternative_contact='".$alternative_contact."',
          email_Id='".$email_Id."',
          designation='".$designation."',
          address='".$address."',
          country='".$country."',
          zipcode='".$zipcode."',
          other_details='".$other_details."'") or die('Error .'.mysql_error());
 
          echo "admin_id=".$admin_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='".$person_id."'";
                    mysql_query($sql_update) or die ('Error '. mysql_error());
               }
    echo "<script>alert('Informations Inserted Successfully');window.location='../meeting/meetingdetails.php';</script>";       
    }      
    }
 
?>
 

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>PersonalDocument</title>
 
<link href="../style.css" rel="stylesheet" type="text/css" />
 
 

 
<script language="javascript">
 
function checkin()
{  
   if (document.personal.person_name.value=="" ||document.personal.person_name.value=="Enter Name")
   {
       alert("Please Insert Contact Person's Name");
       window.document.personal.person_name.focus();
       window.document.personal.person_name.select(); 
       return false;
   }
 
 if(document.personal.TelCC.value=="")
  {
  alert("Please provide correct country code");
  window.document.personal.TelCC.focus();
  return false;
  }
 
if(document.personal.TelAC.value=="")
  {
  alert("Please provide correct area code");
  window.document.personal.TelAC.focus();
  return false;
  }
 
if(document.personal.TelNo.value=="")
  {
  alert("Please provide correct phone number");
  window.document.personal.TelNo.focus();
  return false;
  }
 
 
   if (document.personal.designation.value=="")
   {
       alert("Please Insert Designation Of the Person")
       window.document.personal.designation.focus();
       window.document.personal.designation.select(); 
       return false;
   }
   if (document.personal.address.value=="")
   {
       alert("Address Field Should Not Be Blank ")
       window.document.personal.address.focus();
       window.document.personal.address.select(); 
       return false;
   }
 
   if (document.personal.country.value=="")
   {
       alert("Country Field Should Not Be Blank ")
       window.document.personal.country.focus();
       //window.document.personal.country.select(); 
       return false;
   }
 
 
 fileVal=window.document.personal.photo.value;
            if(fileVal != "")
                {
                        ext=fileVal.substr(fileVal.lastIndexOf(".")).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.personal.other_details.value=="")
   {
       alert("Details About The Person?")
       window.document.personal.other_details.focus();
       window.document.personal.other_details.select(); 
       return false;
   }
 
   else
     return true;
 
 }
 </script>
 
 

 
</head>
 
<body bgcolor="#FFFFFF" 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="multipart/form-data" onsubmit="return checkin();" >
 
  <tr>
    <td width="133"><div align="left"><span class="style30">*&nbsp;</span><span class="style26">Name</span></div></td>
    <td width="270" align="left"><input name="person_name" type="text" id="person_name"  value="<?php echo($_POST['person_name']!=''?$_POST['person_name']:'Enter Name');?>" style=" text-transform: capitalize;" class="blurField" onFocus="if(this.value=='Enter Name') this.value=''; this.className='focusField'" onBlur="return blurCName()"; onchange="return Climit();" >    </td>
 
 

 
    <script language="javascript">
 
 
function blurCName()
{   
//"
  {
    obj = document.getElementById('person_name');
 
    obj.value = (obj.value).replace(/^\s+/, '').replace(/\s+$/, '');
    }
 
 
  if(document.personal.person_name.value=='')
 {
   document.personal.person_name.value='Enter Name';
  document.personal.person_name.className='blurField';
 // document.personal.person_name.focus();
  //document.personal.person_name.select();
    return true;
  }
  else
        //document.personal.person_name.focus();
  return false;
}
 
function Climit()
 
 { var find=/[0-9\*\=\_\>\<\:\@\&\%\?\$\)\(\`\~\#\^\|\+\.\,\;\\\}\{\]\[\\"\!\/\-\']/;
   var maxchars=25;
 
 if(document.personal.person_name.value.length > maxchars) 
 {
   alert('Too much data in the text box! Please remove '+
    (document.personal.person_name.value.length - maxchars)+ ' characters');
             document.personal.person_name.focus();
            document.personal.person_name.select();
   return false;
    }
 
 
 else if(document.personal.person_name.value.search(find)!= -1)
        {
            alert("Only letters are allowed.");
            document.personal.person_name.focus();
            document.personal.person_name.select();
            return false;
        }
        else
   return true; 
 }
 
</script>
 
 

 
  </tr>
  <tr>
    <td><div align="left"><span class="style30">*&nbsp;</span><span class="style26">Contact No </span></div></td>
    <td align="left"><input type="text" cols="10" name="TelCC" maxlength="3" class="focusField" value="<?php echo $_POST['TelCC'];?>"style="width:24px;" >
    -
    <input type="text" cols="10" name="TelAC" maxlength="4" class="focusField" value="<?php echo $_POST['TelAC'];?>" style="width:27px;" >
    -
    <input type="text" cols="10" name="TelNo" maxlength="12" class="" value="<?php echo $_POST['TelNo'];?>" style="width:90px;" onChange="return cont();" ><div class="style3"><?php echo $duplicate_c ; ?></div>
     <script language="javascript">
function cont()
{         
     var find=/[a-zA-Z\`\~\!\@\#\$\%\^\&\*\(\)\-\_\=\+\[\]\{\}\|\\\ \:\;\'\"\<\,\>\.\/\?]/;
 
   if(document.personal.TelNo.value!="")
    {
           if(document.personal.TelCC.value.search(find)!= -1)
                   {
                            alert("Country code is not valid.");
                            document.personal.TelCC.focus();
                            document.personal.TelCC.select();
                            return false;
                   }
 
                if(document.personal.TelAC.value.search(find)!= -1)
                   {
                            alert("Area code is not valid.");
                            document.personal.TelAC.focus();
                            document.personal.TelAC.select();
                            return false;
                   }           
           if(document.personal.TelNo.value.length < 5) 
                {
                alert('Too short data in the text box! Please Insert '+
                (5-document.personal.TelNo.value.length )+ ' Digits');
                return false;
                }
 
    // var iChar="+-";
 
            //alert (i);
                if(document.personal.TelNo.value.search(find)!= -1)
                   {
                            alert("Only DIGITS are allowed.");
                            document.personal.TelNo.focus();
                            document.personal.TelNo.select();
                            return false;
                   }        
        re = /[0-9]/;
      if(!re.test(document.personal.TelNo.value)) 
      {
        alert("Error: Phone number must contain at least one number (0-9)!");
        document.personal.TelNo.focus();
        return false;      
      }
                //if (iChar.indexOf(document.personal.s_address.value.charAt(i))== -1) 
      var ichar="+-";
     var num=0;
     //var arr= new array[];
 
      for (var i = 0; i < document.personal.TelNo.value.length; i++)
       {
           if(ichar.indexOf(document.personal.TelNo.value.charAt(i))!= -1)
                {
                    num=num+1;
 
                    //alert(num);
                }
        }            
               if(num>3)
               {  
                  alert ("You can't insert more than 3 special characters");
                    document.personal.TelNo.focus();
                    document.personal.TelNo.select();
                        return false;
 
               }                     
 
      }  
 
 
    }     
 
      </script>    </td>
  </tr>
  <tr>
    <td><div align="left"><span class="style26">&nbsp;&nbsp;Alternative Contact </span></div></td>
    <td align="left"><input type="text" cols="10" name="ATelCC" maxlength="3" class="focusField" value="<?php echo $_POST['ATelCC'];?>"style="width:24px;">
    -
    <input type="text" cols="10" name="ATelAC" maxlength="4" class="focusField" value="<?php echo $_POST['ATelAC'];?>" style="width:27px;">
    -
    <input type="text" cols="10" name="ATelNo" maxlength="12" class="" value="<?php echo $_POST['ATelNo'];?>"style="width:90px;" onChange="return acont();">
    <script language="javascript">
function acont()
{         
     var find=/[a-zA-Z\`\~\!\@\#\$\%\^\&\*\(\)\-\_\=\+\[\]\{\}\|\\\ \:\;\'\"\<\,\>\.\/\?]/;
 
   if(document.personal.ATelNo.value!="")
    {
           if(document.personal.ATelCC.value.search(find)!= -1)
                   {
                            alert("Country code is not valid.");
                            document.personal.ATelCC.focus();
                            document.personal.ATelCC.select();
                            return false;
                   }
 
                if(document.personal.ATelAC.value.search(find)!= -1)
                   {
                            alert("Area code is not valid.");
                            document.personal.ATelAC.focus();
                            document.personal.ATelAC.select();
                            return false;
                   }           
           if(document.personal.ATelNo.value.length < 5) 
                {
                alert('Too short data in the text box! Please Insert '+
                (5-document.personal.ATelNo.value.length )+ ' digits');
                return false;
                }
 
    // var iChar="+-";
 
            //alert (i);
                if(document.personal.ATelNo.value.search(find)!= -1)
                   {
                            alert("Only DIGITS are allowed.");
                            document.personal.ATelNo.focus();
                            document.personal.ATelNo.select();
                            return false;
                   }    
 
 
        re = /[0-9]/;
      if(!re.test(document.personal.ATelNo.value)) 
      {
        alert("Error: Phone number must contain at least one number (0-9)!");
        document.personal.ATelNo.focus();
        return false;      
      }
                //if (iChar.indexOf(document.personal.s_address.value.charAt(i))== -1) 
      var ichar="+-";
     var num=0;
     //var arr= new array[];
 
      for (var i = 0; i < document.personal.ATelNo.value.length; i++)
       {
           if(ichar.indexOf(document.personal.ATelNo.value.charAt(i))!= -1)
                {
                    num=num+1;
 
                    //alert(num);
                }
        }            
               if(num>3)
               {  
                  alert ("You can't insert more than 3 special characters");
                    document.personal.ATelNo.focus();
                    document.personal.ATelNo.select();
                        return false;
 
               }                     
 
 
      }  
 
 
    }     
 
      </script>    </td>
  </tr>
  <tr>
    <td><div align="left"><span class="style26">&nbsp;&nbsp;Email-Id</span></div></td>
    <td align="left"><input name="email_Id" type="text" id="email_Id" onchange="javascript:return email('personal','email_Id');">
    <script language="javascript">
 
    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(address) == false) {
      alert('Invalid Email Address');
      return false;
   }
}
</script>    </td>
  </tr>
  <tr>
    <td><div align="left"><span class="style30">*&nbsp;</span><span class="style26">Designation</span></div></td>
              <td align="left">&nbsp; </td>
    <script language="javascript">
 
function desig()
 
 { 
     obj = document.getElementById('designation');
    obj.value = (obj.value).replace(/^\s+/, '').replace(/\s+$/, '');
 
 var find=/[0-9\*\=\_\>\<\:\@\&\%\?\$\`\~\#\^\|\+\.\,\;\\\}\{\]\[\\"\!\/\']/;
 
  if(document.personal.designation.value.search(find)!= -1)
        {
            alert("Only letters are allowed.")
            setTimeout("document.personal.designation.focus()",1);
            //document.personal.designation.select();
            setTimeout("document.personal.designation.select()",1);
            return false;
        }
        else
   return true; 
 }
 
    </script>
  </tr>
 
  <tr>
    <td><div align="left"><span class="style30">*&nbsp;</span><span class="style26">Address</span></div></td>
    <td align="left"><span class="style11">
      <textarea name="address" rows="3" id="address" cols="35" onchange="return cadress();"></textarea>
    </span></td>
    <script language="javascript">
function cadress()
 {         
           var find=/[~\`\!\$\%\^\|\\\{\}\?\<\>\[\]\"\'\_\+]/;
          var maxchar=100;
          {
    obj = document.getElementById('address');
 
    obj.value = (obj.value).replace(/^\s+/, '').replace(/\s+$/, '');
    }
          if(document.personal.address.value!="")
           {
           if(document.personal.address.value.length > maxchar) 
                {
                alert('Too much data in the text box! Please remove '+
                (document.personal.address.value.length - maxchar)+ ' characters');
                return false;
                }
 
 
                          else if(document.personal.address.value.search(find)!= -1)
                                  {
                                    alert("Only letters are allowed.");
                                        document.personal.address.focus();
                                        document.personal.address.select();
                                        return false;
                                  }
 
                            else
                        {
                        return true;
                        }
 
 
         }     
 
     }
 
     </script>
  </tr>
  <tr>
    <td><div align="left"><span class="style30">*&nbsp;</span><span class="style26">Country</span></div></td>
    <td align="left"><select name="country" style="color:#000000; border: 1 solid #000000"  id="country" >
                              <option value="">-------SELECT--------</option>
            <?php        
            $all_country = mysql_query("SELECT country from country") or die('Error :' . mysql_error());
 
            while($country_val = mysql_fetch_array($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"><span class="style26">&nbsp;&nbsp;Zip Code</span></div></td>
    <td align="left"><input name="zipcode" type="text" id="zipcode" onchange="return zipnumb();">
    <script language="javascript">
  function zipnumb()
{
    var num;
    num=document.personal.zipcode.value;
    var find=/[a-zA-Z\*\ \=\_\>\<\:\@\&\%\?\$\)\(\|\~\`\!\#\^\]\[\}\{\,\.\;\'\"\+\-\\\/]/;
    if (num.search(find)!= -1)
        {
            alert("That is not a valid zipcode Please enter again.");
            document.personal.zipcode.focus();
            document.personal.zipcode.select();
            return false;
        }
else if(document.personal.zipcode.value.length > 15 ||document.personal.zipcode.value.length < 5) 
                {
                alert("It cannot be more than 15 digit and less than 5 digit");
                document.personal.zipcode.focus();
                document.personal.zipcode.select();
                return false;
                }
                else
 
            return true;
 
 
}
</script>  
  <span class="style33">&nbsp;(e.g. 100001)</span></td>
</tr>
  <tr>
    <td><div align="left"><span class="style26">&nbsp;&nbsp;Photo</span></div></td>
    <td align="left"><input name="photo" type="file"></td>
  </tr>
  <tr>
    <td><div align="left"><span class="style30">*&nbsp;</span><span class="style26">Details</span></div></td>
    <td align="left"><span class="style11">
      <textarea name="other_details"  id="other_details" rows="9" cols="37" onchange="return gap();"></textarea>
    </span>
 
      <script language="javascript">
      function gap()
     {
    obj = document.getElementById('other_details');
 
    obj.value = (obj.value).replace(/^\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>
 

[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.

setTimeout(function() {document.personal.person_name.focus();},50);
setTimeout(function() {document.personal.person_name.select();},50);

[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).