Avatar of blue44
blue44
Flag for United States of America

asked on 

Validating consecutive input fields results in endless loop of alerts

Hi,

I have a form that has consecutive input fields for phone numbers.  The script that validates the phone numbers checks to see if the phone number is correctly entered and if not, sends an alert box and points the focus back to the field.

The problem is that alert boxes seem to be getting activated in both fields and you can't exit out from the alert box.  You end up having to kill the browser and start over.  When I removed the focus, the issue goes away.  If you run the below code as is, you should see the problem.

Any help would be greatly appreciated.

Thanks,
Blue44

Here's my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>


<script language="JavaScript" type="text/JavaScript">
function PhoneValidate(program, field)
{
    var x = null;
    eval("x=document."+program+"."+field+".value");
    if (x == "")
        {
     alert("Phone number must be entered as 619 555-1234.");
     eval("document.forms[\""+program+"\"]."+field+".focus()");
     return false;
        }
         
     var phoneregexp=/^\d\d\d\s?\d\d\d\-\d\d\d\d$/;
     
     if(x.length>0)
       {
                var match=x.match(phoneregexp);
     if (match)
     {
           return true;
      }
     else
          {
                alert("Phone number must be entered as 619 555-1234.");
                eval("document.forms[\""+program+"\"]."+field+".focus()");
                           return false;
          }
          return true;
      }
      }
</script>

</head>

<body>

<form action="ApplyHandler.htm" method="post" name="ApplyUpdate" >

Home Phone:
<input onBlur="PhoneValidate('ApplyUpdate', 'HomePhone')"     name="HomePhone" type="text" size="16" maxlength = "25">

<br>

Work Phone:                                        
<input onBlur="PhoneValidate('ApplyUpdate', 'WorkPhone')" name="WorkPhone" type="text" size="16" maxlength = "25">

<br>

Cell Phone:
<input onBlur="PhoneValidate('ApplyUpdate', 'CellPhone')" name="CellPhone" type="text" size="16" maxlength = "25">

<br>

Other Phone:
<input onBlur="PhoneValidate('ApplyUpdate', 'OtherPhone')" name="OtherPhone" type="text" size="16" maxlength = "25">

<br>

<input name="Submit" type="submit">

</form>



</body>
</html>
JavaScript

Avatar of undefined
Last Comment
blue44

8/22/2022 - Mon