Solved

Validating consecutive input fields results in endless loop of alerts

Posted on 2004-08-12
5
273 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This article discusses how to implement server side field validation and display customized error messages to the client.
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…

729 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