How to add focus to validation error?

[Taylor Smith]

I have a validation file and i do not know where to add the focus so that with each error it focuses on the field where the error occured. Maybe someone will have a better idea on how to do this. Here is my code:

<code>
<script>
// get the div element for the error messages
var errorElem = document.getElementById("error");
 
// define some variables to store the values of the form elements
var Name 
var Street  
var City 
var countrySelect 
var PostalZip 
var DayPhone  
var Email
var shipName 
var shipStreet  
var shipCity 
var shipcountrySelect 
var shipPostalZip 
var shipDayPhone  
var shipEmail 
var pName
var pType
var pExpiry
 
// define a function to do the validation
function validate()
{
Name = nameAlpha();
Street = document.bookform.billStreet.value;
City = document.bookform.billStreet.value;
CountrySelect = countryBlank();
PostalZip = postalAlphaNum();
DayPhone = phoneNum();
Email = validateEmail();
shipName = nameAlphaShip();
shipStreet = document.bookform.shipStreet.value;
shipCity = document.bookform.shipStreet.value;
shipCountrySelect = countryBlankShip();
shipPostalZip = postalAlphaNumShip();
shipDayPhone = phoneNumShip();
pName = payNameAlpha();
pType = paymentBlank();
pNum = payNum();
pExpiry = expiryBlank();
 
   var isValid = false;
 
   if (Name  && Street !== ""  && City !== ""  && 
      CountrySelect && PostalZip  && DayPhone  && Email && shipName  
      && shipStreet !== ""  && shipCity !== ""  && 
      shipCountrySelect  && shipPostalZip  &&
       shipDayPhone && pName && pType && pNum && pExpiry)
   {
      isValid = true;
   }
 
   if (!isValid) 
   {
      handleError();
   }
   else  // clear any error messages
   {
      errorElem.innerHTML = "";
   }
 
   /* The return value is very important in form validation.
   If you return a true value, the form will be submitted; 
   a false value will prevent the form from being submitted. */ 
   return isValid;
}
//-------------------------------------------------------------------------------
 
// ensure that characters entered are alpha only
function nameAlpha()
{
   // get the text element
   var textfield = document.bookform.billName;   
   // get the value of the name entered by the user
   var namev = textfield.value;
   // get the div tag for the error message
   var errorElem = document.getElementById("error");
 
   var pattern = /[^a-zA-Z ]/;
   if ((namev === "" || namev === "undefined") || 
      pattern.test(namev))
   {
 
      return false;  // prevent the form from submitting
   }
 
   // everything ok, so allow the form to be submitted
   errorElem.innerHTML = "";  // clear the error message
   return true;
}
 
// ensure that characters entered are alpha only. SHIPPING
function nameAlphaShip()
{
   // get the text element
   var textfield = document.bookform.shipName;   
   // get the value of the name entered by the user
   var namev = textfield.value;
   // get the div tag for the error message
   var errorElem = document.getElementById("error");
 
   var pattern = /[^a-zA-Z ]/;
   if ((namev === "" || namev === "undefined") || 
      pattern.test(namev))
   {
 
      return false;  // prevent the form from submitting
   }
 
   // everything ok, so allow the form to be submitted
   errorElem.innerHTML = "";  // clear the error message
   return true;
}
 
//for country drop down
function countryBlank()
{
var textfield = document.bookform.billCountrySelect;
var countryv = textfield.value
var errorElem = document.getElementById("error");
 
if (countryv.length < 1)
{
      return false;  // prevent the form from submitting
   }
 
   // everything ok, so allow the form to be submitted
   errorElem.innerHTML = "";  // clear the error message
   return true;
}
 
//for country drop down. SHIPPING
function countryBlankShip()
{
var textfield = document.bookform.shipCountrySelect;
var countryv = textfield.value
var errorElem = document.getElementById("error");
 
if (countryv.length < 1)
{
      return false;  // prevent the form from submitting
   }
 
   // everything ok, so allow the form to be submitted
   errorElem.innerHTML = "";  // clear the error message
   return true;
}
 
// ensure that characters entered are alphanumerical only
function postalAlphaNum()
{
   // get the text element
   var textfield = document.bookform.billPostalZip;   
   // get the value of the name entered by the user
   var postal = textfield.value;
   // get the div tag for the error message
   var errorElem = document.getElementById("error");
 
   var pattern = /[^a-zA-Z0-9]/;
   if ((postal === "" || postal === "undefined") || 
      pattern.test(postal))
   {
 
      return false;  // prevent the form from submitting
   }
 
   // everything ok, so allow the form to be submitted
   errorElem.innerHTML = "";  // clear the error message
   return true;
}
 
// ensure that characters entered are alphanumerical only. SHIPPING
function postalAlphaNumShip()
{
   // get the text element
   var textfield = document.bookform.shipPostalZip;   
   // get the value of the name entered by the user
   var postal = textfield.value;
   // get the div tag for the error message
   var errorElem = document.getElementById("error");
 
   var pattern = /[^a-zA-Z0-9]/;
   if ((postal === "" || postal === "undefined") || 
      pattern.test(postal))
   {
 
      return false;  // prevent the form from submitting
   }
 
   // everything ok, so allow the form to be submitted
   errorElem.innerHTML = "";  // clear the error message
   return true;
}
 
// ensure that characters entered are numerical only for phone number
function phoneNum()
{
   // get the text element1
   var textfield1 = document.bookform.billDayPhone1;   
   // get the value of the name entered by the user
   var phone1 = textfield1.value;
 
   var textfield2 = document.bookform.billDayPhone2;   
   var phone2 = textfield2.value;
 
   var textfield3 = document.bookform.billDayPhone3;   
   var phone3 = textfield3.value;
 
   // get the div tag for the error message
   var errorElem = document.getElementById("error");
 
   var pattern = /[^0-9 ]/;
if (
     (phone1 === "" || phone1 === "undefined") ||
     (phone2 === "" || phone2 === "undefined") || 
     (phone3 === "" || phone3 === "undefined") ||
     (pattern.test(phone1 && phone2 && phone3)))
   {
 
      return false;  // prevent the form from submitting
   }
 
   // everything ok, so allow the form to be submitted
   errorElem.innerHTML = "";  // clear the error message
   return true;
}
 
// ensure that characters entered are numerical only for phone number. SHIPPING
function phoneNumShip()
{
   // get the text element1
   var textfield1 = document.bookform.shipDayPhone1;   
   // get the value of the name entered by the user
   var phone1 = textfield1.value;
 
   var textfield2 = document.bookform.shipDayPhone2;   
   var phone2 = textfield2.value;
 
   var textfield3 = document.bookform.shipDayPhone3;   
   var phone3 = textfield3.value;
 
   // get the div tag for the error message
   var errorElem = document.getElementById("error");
 
   var pattern = /[^0-9 ]/;
   if ((phone1 === "" || phone1 === "undefined" && phone2 === "" || 
      phone2 === "undefined" || phone3 === "" && phone3 === "undefined") ||
      pattern.test(phone1 && phone2 && phone3))
   {
 
      return false;  // prevent the form from submitting
   }
 
   // everything ok, so allow the form to be submitted
   errorElem.innerHTML = "";  // clear the error message
   return true;
}
 
function validateEmail()
{ 
   var formElem = document.bookform
   // get the text element
   var textfield = document.bookform.billEmail;   
   // get the value of the name entered by the user
   var emailv = textfield.value;
   // get the div tag for the error message
   var errorElem = document.getElementById("error");
 
var pattern = /^[a-zA-Z0-9\- ]+\@[a-zA-Z0-9 \-\.]+\.([a-zA-Z]{2,3})$/;
   if ((emailv === "" || emailv === "undefined") || 
      !pattern.test(emailv))
   {
      return false;  // prevent the form from submitting
   }
 
   // everything ok, so allow the form to be submitted
   errorElem.innerHTML = "";  // clear the error message
   return true;
}
 
 
//Payment Validation-------------------------------------------------
 
function payNameAlpha()
{
   // get the text element
   var textfield = document.bookform.payName;   
   // get the value of the name entered by the user
   var payName = textfield.value;
   // get the div tag for the error message
   var errorElem = document.getElementById("error");
 
   var pattern = /[^a-zA-Z ]/;
   if ((payName === "" || payName === "undefined") || 
      pattern.test(payName))
   {
 
      return false;  // prevent the form from submitting
   }
 
   // everything ok, so allow the form to be submitted
   errorElem.innerHTML = "";  // clear the error message
   return true;
}
 
//for credit card drop down
function paymentBlank()
{
var textfield = document.bookform.paymentType;
var pay = textfield.value
var errorElem = document.getElementById("error");
 
if (pay.length < 1)
{
      return false;  // prevent the form from submitting
   }
 
   // everything ok, so allow the form to be submitted
   errorElem.innerHTML = "";  // clear the error message
   return true;
}
 
function payNum()
{
   // get the text element
   var textfield = document.bookform.payNum;   
   // get the value of the phone number entered by the user
   var payNumv = textfield.value;
   // get the div tag for the error message
   var errorElem = document.getElementById("error");
 
   var pattern = /[0-9]/;
   if ((payNumv === "" || payNumv === "undefined") || !pattern.test(payNumv))
   {
 
      return false;  // prevent the form from submitting
   }
 
   // everything ok, so allow the form to be submitted
   errorElem.innerHTML = "";  // clear the error message
   return true;
}
 
 
//for expiry drop downs
function expiryBlank()
{
var textfield1 = document.bookform.expiryMonth;
var month = textfield1.value
 
var textfield2 = document.bookform.expiryYear;
var year = textfield2.value
 
var errorElem = document.getElementById("error");
 
if (month.length < 1 && year.length < 1)
{
 
      return false;  // prevent the form from submitting
   }
 
   // everything ok, so allow the form to be submitted
   errorElem.innerHTML = "";  // clear the error message
   return true;
}
 
//------------------------------------------------------------------
function handleError()
{
   if (!Name) 
      errorElem.innerHTML = "Please enter your name. Letters and spaces only.";
   else if (Street === "") 
      errorElem.innerHTML = "Please provide a street addess.";
   else if (City === "")
      errorElem.innerHTML = "Please provide a city.";
   else if (!CountrySelect)
      errorElem.innerHTML = "Please select your country.";
   else if (!PostalZip) 
      errorElem.innerHTML = "Please provide a postal/zip code. Letters and numbers only";
   else if (!DayPhone) 
      errorElem.innerHTML = "Please provide a phone number. Numbers only.";
   else if (!Email) 
      errorElem.innerHTML = "Please provide an email. Must have an '@' and '.'";
   else if (!shipName) 
      errorElem.innerHTML = "Please enter your shipping name. Letters and spaces only.";
   else if (shipStreet === "") 
      errorElem.innerHTML = "Please provide a shipping street addess.";
   else if (shipCity === "")
      errorElem.innerHTML = "Please provide a shipping city.";
   else if (!shipCountrySelect)
      errorElem.innerHTML = "Please select your shipping country.";
   else if (!shipPostalZip) 
      errorElem.innerHTML = "Please provide a shipping postal/zip code. Letters and numbers only.";
   else if (!shipDayPhone) 
      errorElem.innerHTML = "Please provide a shipping phone number. Numbers only.";
   else if (!pName) 
      errorElem.innerHTML = "Please enter your credit card name. Letters and spaces only.";
   else if (!pType) 
      errorElem.innerHTML = "Please select your credit card.";
   else if (!pNum) 
      errorElem.innerHTML = "Please provide a credit card number. Numbers only.";
   else if (!pExpiry) 
      errorElem.innerHTML = "Please provide an expiry date.";
}
</script>
</code>
 

Please help! :)

Thanks

[acoder]

Use focus() on the element in question, e.g.

field.focus();

[Taylor Smith]

yes i've tried that. For example, I've tried to add it to each validation function just above return false and it works in a way but it starts at the bottom. So my top error message will display(if im validating an empty form) but the focus goes to the bottom field. Why would that be? Where else can i add it?

[acoder]

Add those lines to the handleError function in each if/else section (you will need to add brackets to allow 2 statements).