Solved

Validating consecutive input fields results in endless loop of alerts

Posted on 2004-08-12
5
268 Views
Last Modified: 2008-03-06
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
Comment
Question by:blue44
  • 2
  • 2
5 Comments
 
LVL 10

Expert Comment

by:m8rix
ID: 11789381
instead of using onblur use onchange


ie:
<input onChange="PhoneValidate('ApplyUpdate', 'HomePhone')"     name="HomePhone" type="text" size="16" maxlength = "25">
0
 

Author Comment

by:blue44
ID: 11789445
I did that but the result is that it no longer validates or prompts an alert box at all.
0
 
LVL 10

Expert Comment

by:m8rix
ID: 11789534
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
 
LVL 25

Accepted Solution

by:
devic earned 500 total points
ID: 11790704
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
 

Author Comment

by:blue44
ID: 11794415
devic,

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

Thanks again!!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now