IE Form Validation Issues

HI EE,

I've created a form which I've added some JavaScript validation to be fired when the onblur event happens. Now I've tested it fine in chrome / firefox  but in IE it does strange things.

If the criteria passes the validation it moves on to the next part of the form fine, however if it fails and the user has jumped to the next field, it begin this crazy doom loop and eventual crashes IE....Not good.

I'm unsure how to tackle this doom loop.
 my code is below:

<!DOCTYPE html>
<html>
<head>
<title>Validation Issue</title>
</head>
<body>

<div class="formbox">
<form name="Insert" class="Insert"> 
 
<select name="Title"> 
<option style="background: #74cfb5;" value="Mr">Mr</option>
<option style="background: #74cfb5;" value="Mrs">Mrs</option>
<option style="background: #74cfb5;" value="Miss">Miss</option>
<option style="background: #74cfb5;" value="Ms">Ms</option>
<option style="background: #74cfb5;" value="Dr">Dr</option>
</select>
Manager Forenames: <input name="ManagerForenames" onblur="ValidateForenames(this.value);" type="text">
Surname: <input name="Surname" onblur="ValidateSurname(this.value);" type="text">
Email Address: <input name="EmailAddress" onblur="ValidateEmail(this.value);" type="text">
Telephone: <input name="Telephone" onblur="ValidateTelephone(this.value);" type="text">
Your Name: <input name="YourName" onblur="ValidateYourName(this.value);" type="text">
Your Number: <input name="YourNumber" onblur="ValidateYourNumber(this.value);" type="text">
<input id="submitbutton" class="submitbutton " type="submit">  
</form>
</div>
<script language="JavaScript">
function ValidateForenames(Forenames) 
{
 if ( /^[a-zA-Z]+$/.test(Insert.ManagerForenames.value))
  {
	document.forms['Insert'].elements['ManagerForenames'].style.backgroundColor = "rgba(255, 255, 255, 0.4)";
    return (true)
  }
 
    document.forms['Insert'].elements['ManagerForenames'].style.backgroundColor = "red";
    document.forms['Insert'].elements['ManagerForenames'].focus();
    return false;
}


function ValidateSurname(Surname) 
{
 if ( /^[a-zA-Z]+$/.test(Insert.Surname.value))
  {
	document.forms['Insert'].elements['Surname'].style.backgroundColor = "rgba(255, 255, 255, 0.4)";
    return (true)
  }
 
    document.forms['Insert'].elements['Surname'].style.backgroundColor = "red";
    document.forms['Insert'].elements['Surname'].focus();
    return false;
}


function ValidateEmail(mail) 
{
 if ( /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(Insert.EmailAddress.value))
  {
	document.forms['Insert'].elements['EmailAddress'].style.backgroundColor = "rgba(255, 255, 255, 0.4)";
    return (true)
  }
 
    document.forms['Insert'].elements['EmailAddress'].style.backgroundColor = "red";
    document.forms['Insert'].elements['EmailAddress'].focus();
    return false;
}

function ValidateTelephone(Telephone) 
{
 if ( /^((\(?0\d{4}\)?\s?\d{3}\s?\d{3})|(\(?0\d{3}\)?\s?\d{3}\s?\d{4})|(\(?0\d{2}\)?\s?\d{4}\s?\d{4}))(\s?\#(\d{4}|\d{3}))?$/.test(Insert.Telephone.value))
  {
	document.forms['Insert'].elements['Telephone'].style.backgroundColor = "rgba(255, 255, 255, 0.4)";
    return (true)
  }
 
    document.forms['Insert'].elements['Telephone'].style.backgroundColor = "red";
    document.forms['Insert'].elements['Telephone'].focus();
    return false;
}

function ValidateYourName(YourName) 
{
 if ( /^[a-zA-Z]+$/.test(Insert.YourName.value))
  {
	document.forms['Insert'].elements['YourName'].style.backgroundColor = "rgba(255, 255, 255, 0.4)";
    return (true)
  }
 
    document.forms['Insert'].elements['YourName'].style.backgroundColor = "red";
    document.forms['Insert'].elements['YourName'].focus();
    return false;
}

function ValidateYourNumber(YourNumber) 
{
 if (  /^((\(?0\d{4}\)?\s?\d{3}\s?\d{3})|(\(?0\d{3}\)?\s?\d{3}\s?\d{4})|(\(?0\d{2}\)?\s?\d{4}\s?\d{4}))(\s?\#(\d{4}|\d{3}))?$/.test(Insert.YourNumber.value))
  {
	document.forms['Insert'].elements['YourNumber'].style.backgroundColor = "rgba(255, 255, 255, 0.4)";
    return (true)
  }
 
    document.forms['Insert'].elements['YourNumber'].style.backgroundColor = "red";
    document.forms['Insert'].elements['YourNumber'].focus();
    return false;
}

</script>
</body>
</html>

Open in new window

LVL 7
Ross TurnerManagement Information Support AnalystAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
It looks like it is the .focus that is causing the problem. As you tab from one field to the next onblur fires and then focuses back to the first - which causes an onblur on the second which fires an onblur on the first etc.

Take the .focus out.
Julian HansenCommented:
Not sure who to call out on this - IE is theoretically doing what it is supposed to - whether the other browsers are just being intuitive or missing something I don't know.

There is a bit of a hack you can do to get around this and still keep your functionality - see code below
// Just a note - language attribute is obsolete
<script type="text/javascript">
// ADD FLAG THAT SAYS WHETHER OR NOT WE ARE BLURRING BECAUSE OF AN ERROR
var focus = false;
function ValidateForenames(Forenames) 
{
  // IF WE ARE ERRORING THEN DON'T PROCESS THIS BLUR 
  // BUT CLEAR IT SO WE CAN CATCH THE NEXT BLUR  
  if (focus) {
    focus = false;
    return true;
  }
  if ( /^[a-zA-Z]+$/.test(Insert.ManagerForenames.value))
  {
    document.forms['Insert'].elements['ManagerForenames'].style.backgroundColor = "rgba(255, 255, 255, 0.4)";
    return (false)
  }

  document.forms['Insert'].elements['ManagerForenames'].style.backgroundColor = "red";

  // WE ARE ABOUT TO BLUR DUE TO ERROR SO SET FLAG TO PREVENT IE CRAWLING UP IT'S
  // OWN HOLE
  focus = true;
  document.forms['Insert'].elements['ManagerForenames'].focus();
  return false;
}

Open in new window

Repeat for remaining validation functions.
Julian HansenCommented:
You might need to put that new code in a test for IE - not sure how FF and the rest will respond to it. Might be best just to forget the .focus for now.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Michel PlungjanIT ExpertCommented:
Hmm, this turns out to be harder than I though...

You need to use setTimeout but your initial logic makes the field we blur when focussing the previous field ALSO validate. Anyway I shortened the script and added onsubmit

<!DOCTYPE html>
<html>
<head>
<title>Validation Issue</title>
<script type="text/javascript">
var vals = {
  name : /^[a-zA-Z]+$/,
  phone: /^((\(?0\d{4}\)?\s?\d{3}\s?\d{3})|(\(?0\d{3}\)?\s?\d{3}\s?\d{4})|(\(?0\d{2}\)?\s?\d{4}\s?\d{4}))(\s?\#(\d{4}|\d{3}))?$/,
  email: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
}
var fieldToFocus,tId;
function validate(field) {
  clearTimeout(tId);
  var val = field.getAttribute("data-val");
  if (vals[val].test(field.value)) {
    field.style.backgroundColor = "rgba(255, 255, 255, 0.4)";
    return true;
  }
  if (!fieldToFocus) fieldToFocus=field;
  field.style.backgroundColor = "red";
  tId = setTimeout(function() { if(fieldToFocus) { fieldToFocus.focus(); fieldToFocus=null; } },100);
  return false;
}

window.onload=function() {
  var form = document.getElementById("Insert");
  var fields = form.elements;
  for (var i=0;i<fields.length;i++) {
    if (fields[i].getAttribute("data-val")) {
      fields[i].onblur=function() { validate(this) }
      fields[i].onfocus=function() {  }
    }
  }
  form.onsubmit=function() {
    var fields = this.elements;
    for (var i=0;i<fields.length;i++) {
      if (fields[i].getAttribute("data-val") && !validate(fields[i])) return false;
    }
    return true;
  }
}

</script>
</head>
<body>

<div class="formbox">
<form class="Insert" id="Insert">

<select name="Title">
<option style="background: #74cfb5;" value="Mr">Mr</option>
<option style="background: #74cfb5;" value="Mrs">Mrs</option>
<option style="background: #74cfb5;" value="Miss">Miss</option>
<option style="background: #74cfb5;" value="Ms">Ms</option>
<option style="background: #74cfb5;" value="Dr">Dr</option>
</select>
Manager Forenames: <input name="ManagerForenames" data-val="name" type="text">
Surname: <input name="Surname" data-val="name" type="text">
Email Address: <input name="EmailAddress" data-val="email"  type="text">
Telephone: <input name="Telephone" data-val="phone" type="text">
Your Name: <input name="YourName" data-val="name" type="text">
Your Number: <input name="YourNumber" data-val="phone" type="text">
<input id="submitbutton" class="submitbutton " type="submit">
</form>
</div>
</body>
</html>

Open in new window

Michel PlungjanIT ExpertCommented:
This one is working but I cannot at a glance see what kind of phone number you will allow

<!DOCTYPE html>
<html>
<head>
<title>Validation Issue</title>
<script type="text/javascript">
var tId,vals = {
  name : /^[a-zA-Z]+$/,
  phone: /^((\(?0\d{4}\)?\s?\d{3}\s?\d{3})|(\(?0\d{3}\)?\s?\d{3}\s?\d{4})|(\(?0\d{2}\)?\s?\d{4}\s?\d{4}))(\s?\#(\d{4}|\d{3}))?$/,
  email: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
}
function validate(field) {
  var val = field.getAttribute("data-val");
  if (vals[val].test(field.value)) {
    field.style.backgroundColor = "rgba(255, 255, 255, 0.4)";
    return true;
  }
  field.style.backgroundColor = "red";
  tId = setTimeout(focusErr,100);
  return false;
}

function focusErr() {
  var form = document.getElementById("Insert");
  var fields = form.elements;
  for (var i=0;i<fields.length;i++) {
    if (fields[i].style.backgroundColor=="red") {
      fields[i].focus();
      return;
    }
  }
}
window.onload=function() {
  var form = document.getElementById("Insert");
  var fields = form.elements;
  for (var i=0;i<fields.length;i++) {
    if (fields[i].getAttribute("data-val")) {
      fields[i].onblur=function() { validate(this) }
      fields[i].onfocus=focusErr;
    }
  }
  form.onsubmit=function() {
    var fields = this.elements;
    for (var i=0;i<fields.length;i++) {
      if (fields[i].getAttribute("data-val") && !validate(fields[i])) {
        return false;
      }
    }
    return true;
  }
}

</script>
</head>
<body>

<div class="formbox">
<form class="Insert" id="Insert">

<select name="Title">
<option style="background: #74cfb5;" value="Mr">Mr</option>
<option style="background: #74cfb5;" value="Mrs">Mrs</option>
<option style="background: #74cfb5;" value="Miss">Miss</option>
<option style="background: #74cfb5;" value="Ms">Ms</option>
<option style="background: #74cfb5;" value="Dr">Dr</option>
</select>
Manager Forenames: <input name="ManagerForenames" data-val="name" type="text">
Surname: <input name="Surname" data-val="name" type="text">
Email Address: <input name="EmailAddress" data-val="email"  type="text">
Telephone: <input name="Telephone" data-val="phone" type="text">
Your Name: <input name="YourName" data-val="name" type="text">
Your Number: <input name="YourNumber" data-val="phone" type="text">
<input id="submitbutton" class="submitbutton " type="submit">
</form>
</div>
</body>
</html>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ross TurnerManagement Information Support AnalystAuthor Commented:
Sorry for the long delay in answering, but this worked fantastic after a little tweaking,

Thank you so much
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.