如何将焦点添加到验证错误?

我有一个验证文件,但我不知道在哪里添加焦点,以便在每次出错时,焦点都集中在发生错误的字段上.也许有人会对如何做到这一点有更好的想法.以下是我的代码:
选择 | 换行 | 行号
 <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>
 
 
请帮帮忙!:)
谢谢
# 回答1
在有问题的元素上使用Focus(),例如
选择 | 换行 | 行号
field.focus();
# 回答2
是的我试过了.例如,我尝试将它添加到每个验证函数的返回FALSE上方,它在某种程度上是有效的,但它从底部开始.因此,我的顶部错误消息将会显示(如果我正在验证一个空表单),但焦点将转到底部字段.为什么会这样呢?我还可以在哪里添加它?
# 回答3
将这些行添加到每个if/Else部分的handleError函数中(您需要添加括号以允许2个语句).
如何将焦点添加到验证错误?

添加新评论

最新文章

分类

最近回复

归档

其它
