Solved

Validating consecutive input fields results in endless loop of alerts

Posted on 2004-08-12
5
267 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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

747 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

11 Experts available now in Live!

Get 1:1 Help Now