Javascript - 我如何专注于产生错误的领域？答案

【问题标题】：Javascript - how do I focus to field producing an error?Javascript - 我如何专注于产生错误的领域？
【发布时间】：2016-05-30 02:43:10
【问题描述】：

正在做一个创建信用卡表格的练习，我有点卡住了。我的问题是它似乎总是关注第一个字段（名字），否则关注最后一个输入的字段。有没有一种简单的方法让它专注于产生错误的适当领域？

HTML：

<!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" >
	First Name
    <input id="fname" type="text" size="30">
	<br /><br />
	Last Name
    <input id="sname" type="text"  size="30">
	<br /><br />
	Postcode
	<input id="pcode" type="text" size="30">
	<br /><br />
	Email
	<input id="email" type="text" size="30">
	<br />
<h2>Payment Details</h2>
	Credit Card
	<select name="creditcard">
	<option value="amex">American Express</option>
	<option value="visa">Visa</option>
	<option value="master">Mastercard</option>
	</select>
	<br /><br />
	Card number 
    <input id="cardnum" type="text" size="30">
	<br /><br />
	CCV 
    <input id="ccv" type="text" size="30">
	<br /><br />
	Expiry MM/YYYY
	<select id="expiry_month" name="month">
	<option value="01">01</option>
	<option value="02">02</option>
	<option value="03">03</option>
	<option value="04">04</option>
	<option value="05">05</option>
	<option value="06">06</option>
	<option value="07">07</option>
	<option value="08">08</option>
	<option value="09">09</option>
	<option value="10">10</option>
	<option value="11">11</option>
	<option value="12">12</option>
	</select>
	<select id="expiry_year" name="year">
	<option value="2016">2016</option>
	<option value="2017">2017</option>
	<option value="2018">2018</option>
	<option value="2019">2019</option>
	<option value="2020">2020</option>
	</select>
	<br />
	<input type="submit" value="Submit"/> 
	<input type="button" value="Help" onclick="openWin()">
	<br />
</form>
</body>
</html>

还有我的 Javascript：

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

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

抱歉发了这么长的帖子，我还是在这里学习！

【问题讨论】：

标签： javascript html focus field

【解决方案1】：

你的问题就在这里：

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;
}

【讨论】：