2016-05-30 8 views
0

クレジットカードフォームを作成する作業に取り組んでいます。私はちょっと立ち往生しています。私の問題は、常に最初のフィールド(ファーストネーム)にフォーカスしているように見えることです。エラーを引き起こしている適切なフィールドに焦点を当てる簡単な方法はありますか?Javascript - エラーを生成するフィールドにどのようにフォーカスしますか?

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8" /> 
 
<title>Javascript Form Assignment</title> 
 
</head> 
 
<body bgcolor="E6E6FA"> 
 
<script src="./js/assignment.js"> 
 
</script> 
 
<section> 
 
<h2>Customer Details</h2> 
 
<form name="contactForm" onsubmit="return validateForm()" method="post" > 
 
\t First Name 
 
    <input id="fname" type="text" size="30"> 
 
\t <br /><br /> 
 
\t Last Name 
 
    <input id="sname" type="text" size="30"> 
 
\t <br /><br /> 
 
\t Postcode 
 
\t <input id="pcode" type="text" size="30"> 
 
\t <br /><br /> 
 
\t Email 
 
\t <input id="email" type="text" size="30"> 
 
\t <br /> 
 
<h2>Payment Details</h2> 
 
\t Credit Card 
 
\t <select name="creditcard"> 
 
\t <option value="amex">American Express</option> 
 
\t <option value="visa">Visa</option> 
 
\t <option value="master">Mastercard</option> 
 
\t </select> 
 
\t <br /><br /> 
 
\t Card number 
 
    <input id="cardnum" type="text" size="30"> 
 
\t <br /><br /> 
 
\t CCV 
 
    <input id="ccv" type="text" size="30"> 
 
\t <br /><br /> 
 
\t Expiry MM/YYYY 
 
\t <select id="expiry_month" name="month"> 
 
\t <option value="01">01</option> 
 
\t <option value="02">02</option> 
 
\t <option value="03">03</option> 
 
\t <option value="04">04</option> 
 
\t <option value="05">05</option> 
 
\t <option value="06">06</option> 
 
\t <option value="07">07</option> 
 
\t <option value="08">08</option> 
 
\t <option value="09">09</option> 
 
\t <option value="10">10</option> 
 
\t <option value="11">11</option> 
 
\t <option value="12">12</option> 
 
\t </select> 
 
\t <select id="expiry_year" name="year"> 
 
\t <option value="2016">2016</option> 
 
\t <option value="2017">2017</option> 
 
\t <option value="2018">2018</option> 
 
\t <option value="2019">2019</option> 
 
\t <option value="2020">2020</option> 
 
\t </select> 
 
\t <br /> 
 
\t <input type="submit" value="Submit"/> 
 
\t <input type="button" value="Help" onclick="openWin()"> 
 
\t <br /> 
 
</form> 
 
</body> 
 
</html>

そして、私のJavascriptを::

HTML

長い記事のため

function openWin() { 
 
    window.open(src="./html/help.html"); 
 
} 
 
function validateForm() 
 
{ 
 
\t var fname = document.getElementById("fname"); 
 
\t var sname = document.getElementById("sname"); 
 
\t var pcode = document.getElementById("pcode"); 
 
\t var email = document.getElementById("email"); 
 
\t var cardnum = document.getElementById("cardnum"); 
 
\t var ccv = document.getElementById("ccv"); 
 
\t 
 
    var expiry_month = document.getElementById("expiry_month").value; 
 
    var expiry_year = document.getElementById("expiry_year").value; 
 

 
    var today = new Date(); 
 
    var selDate = new Date() 
 
\t 
 
\t if (fname.value==""){ 
 
\t \t alert("Please enter your first name"); 
 
\t \t fname.focus(); 
 
\t \t return false; 
 
\t } 
 
\t \t if (sname.value==""){ 
 
\t \t alert("Please enter your last name"); 
 
\t \t fname.focus(); 
 
\t \t return false; 
 
\t } 
 
\t \t if (pcode.value==""){ 
 
\t \t alert("Please enter your postcode"); 
 
\t \t fname.focus(); 
 
\t \t return false; 
 
\t } 
 
\t \t if (pcode.value.length!=4 || isNaN(pcode.value)){ 
 
\t \t alert("Please enter a 4 digit postcode"); 
 
\t \t pcode.focus(); 
 
\t \t return false; 
 
\t } 
 
\t \t if (email.value==""){ 
 
\t \t alert("Please enter your email address"); 
 
\t \t fname.focus(); 
 
\t \t return false; \t 
 
\t } 
 
\t \t if (email.value.indexOf("@")==-1){ 
 
\t \t alert("Please enter a valid email address"); 
 
\t \t email.focus(); 
 
\t \t return false; 
 
\t } 
 
\t if (email.value.indexOf(".")==-1){ 
 
\t \t alert("Please enter a valid email address"); 
 
\t \t email.focus(); 
 
\t \t return false; 
 
\t } 
 
\t \t if (cardnum.value==""){ 
 
\t \t alert("Please enter your card number"); 
 
\t \t fname.focus(); 
 
\t \t return false; \t 
 
\t } 
 
\t \t if (cardnum.value.length!=16 || isNaN(cardnum.value)){ 
 
\t \t alert("Please enter a 16 digit credit card number"); 
 
\t \t cardnum.focus(); 
 
\t \t return false; 
 
\t } 
 
\t \t if (ccv.value==""){ 
 
\t \t alert("Please enter your ccv"); 
 
\t \t fname.focus(); 
 
\t \t return false; 
 
\t } 
 
\t if (ccv.value.length!=3 || isNaN(ccv.value)){ 
 
\t \t alert("Please enter a 3 digit CCV"); 
 
\t \t ccv.focus(); 
 
\t \t return false; 
 
\t } 
 
    if (today.getTime() > selDate.setFullYear(expiry_year, expiry_month)){ 
 
     alert ("Expiry month and year is before today month and year."); 
 
     return false; 
 
\t } 
 
\t 
 
\t alert("Thank you for your submission"); 
 
\t return true; 
 
}

申し訳ありませんが、まだ周り私の方法を学びますここに!

答えて

0

あなたの問題はここです:

if (sname.value==""){ 
     alert("Please enter your last name"); 
     fname.focus(); 
     return false; 
} 

あなたは最後の名前のフィールドをチェックし、それが無効だ場合は、最初の名前フィールドを集中しています。これは次のとおりです。

if (sname.value==""){ 
    alert("Please enter your last name"); 
    sname.focus(); 
    return false; 
} 
関連する問題