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;
}
申し訳ありませんが、まだ周り私の方法を学びますここに!