正在验证表单中的多个字段-Javascript

我正在尝试验证表单中的三个字段。我已经为它们编写了代码，并认为它们可以工作。我唯一的问题是它们没有按顺序完成。如果我在没有填写任何内容的情况下提交表格，它会接受电子邮件验证。如果我填写了名字，再次跳过名字和姓氏验证，直接进入电子邮件。我试着让它按顺序工作，先是名字，然后是姓氏和电子邮件。如有任何帮助，我们将不胜感激。

JS-

function validateForm() {
var fname = document.forms["buyProductForm"]["fname"].value;
if (fname == "") {
alert("Firstname must be filled out");
return false;
}
}
function validateForm() {
var sname = document.forms["buyProductForm"]["sname"].value;
if (sname == "") {
alert("Surname must be filled out");
return false;
}
}
function validateForm() { 
var email = document.forms["buyProductForm"]["email"].value;
if (email == "") {
alert("Email must be filled out");
return false;
}
}

HTML

<form name="buyProductForm" onsubmit="return validateForm()" method="post">
<fieldset id="field1">
<legend>Personal Details</legend>

<label for="name">Firstname:</label>
<input type="text" name="fname" placeholder="Enter your first name" ><br>
<label for="name">Surname:</label>
<input type="text" name="sname" placeholder="Enter your surname"><br>
<label for="email">Email Adress:</label>
<input type="email" name="email" placeholder="Enter your email" ><br>

Jsut只创建一个validateForm()函数，并在该函数中验证所有字段。

function validateForm() {
	var fname = document.forms["buyProductForm"]["fname"].value;
	if (fname == "") {
		alert("Firstname must be filled out");
		return false;
	}
	 var sname = document.forms["buyProductForm"]["sname"].value;
	if (sname == "") {
		alert("Surname must be filled out");
		return false;
	}
	var email = document.forms["buyProductForm"]["email"].value;
	if (email == "") {
		alert("Email must be filled out");
		return false;
	}
}

<form name="buyProductForm" onsubmit="return validateForm()" method="post">
<fieldset id="field1">
<legend>Personal Details</legend>
<label for="name">Firstname:</label>
<input type="text" name="fname" placeholder="Enter your first name" ><br>
<label for="name">Surname:</label>
<input type="text" name="sname" placeholder="Enter your surname"><br>
<label for="email">Email Adress:</label>
<input type="email" name="email" placeholder="Enter your email" ><br>
<input type="submit" value="Submit">
</form>

function validateForm() {
var fname = document.forms["buyProductForm"]["fname"].value;
if (fname == "") {
alert("Firstname must be filled out");
return false;
}
var sname = document.forms["buyProductForm"]["sname"].value;
if (sname == "") {
alert("Surname must be filled out");
return false;
}
var email = document.forms["buyProductForm"]["email"].value;
if (email == "") {
alert("Email must be filled out");
return false;
}
}

相关内容

最新更新

热门标签：