• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 279
  • Last Modified:

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>
0
blue44
Asked:
blue44
  • 2
  • 2
1 Solution
 
m8rixCommented:
instead of using onblur use onchange


ie:
<input onChange="PhoneValidate('ApplyUpdate', 'HomePhone')"     name="HomePhone" type="text" size="16" maxlength = "25">
0
 
blue44Author Commented:
I did that but the result is that it no longer validates or prompts an alert box at all.
0
 
m8rixCommented:
Hmm.. weird???

I don't know why that is not working, but I can I suggest a change in your code?
At the moment, when the user enteres an invalid number the validation is not started until the focus is removed from the element. The problem is that when the focus has left the element, it is focusing on another element in the form in which the validation forces the focus back to the original element thus triggering the validation for the second element.
Now... to stop this you should ignore blank fields in your validation for the time being.
You could always do a form validation onsubmit and make sure there are no blanks later on.

<script language="JavaScript" type="text/JavaScript">
function PhoneValidate(program, field)
{
    var x = null;
    eval("x=document."+program+"."+field+".value");
    if (x == "")
        {
         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>
0
 
devicCommented:
you need to check it onsubmit, else I can submit without fill the fields
================================================
<!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(obj)
{
      var el=obj.elements;
      for(var i=0;i<el.length;i++)
      {
            if(el[i].name.match(/Phone/) && !el[i].value.match(/^\d\d\d\s?\d\d\d\-\d\d\d\d$/))
            {
                  alert("Phone number must be entered as 619 555-1234.");
                  el[i].focus();
                  return false;
            }
      }
      return true
}
</script>

</head>

<body>

<form action="ApplyHandler.htm" method="post" name="ApplyUpdate" onsubmit="return PhoneValidate(this)">

Home Phone:
<input  name="HomePhone" type="text" size="16" maxlength = "25">

<br>

Work Phone:                                        
<input  name="WorkPhone" type="text" size="16" maxlength = "25">

<br>

Cell Phone:
<input name="CellPhone" type="text" size="16" maxlength = "25">

<br>

Other Phone:
<input name="OtherPhone" type="text" size="16" maxlength = "25">

<br>

<input type="submit">

</form>
0
 
blue44Author Commented:
devic,

I'm giving you the full 500 for your help with my other hidden/visible question.

Thanks again!!
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.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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