我正在使用它来验证我的表单，以便任何留空的字段都会出现一条消息。我收到要显示的消息，但它会在之后立即重新启动页面。
html代码:
<head>
<title> Flower Spotter</title>
<link rel="stylesheet" type="text/css" href="..//css/flower.css"/>
<script type= "text/javascript" src="..//js/flower.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<img src="..//img/orchid.jpg" alt="bann"/><br/>
<h1 class="style1 style2">Flower Spotter </h1>
</div>
<div id="menu">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div id="formControl">
<form id="form" action="" method="post" onsubmit="validateForm();">
<fieldset>
<legend>Personal Information</legend>
<label> First Name: </label> <br/>
<input type="text" id="fname" name="fname"/> <br/>
<span id="f_error"></span><br/><br/>
<label>Last Name </label><br/>
<input type="text" name="lname" id="lname"/><br/><br/>
<span id="l_error"></span><br/><br/>
<label> Sex: </label><br/>
Male <input type="radio" id="msex" name="sex" value="Male"/>
Female <input type="radio" id="fsex" name="sex" value="female"/> <br/> <br/> <br/>
<label> Address: </label><br/>
<textarea id="address" name="address" rows="0" cols="0"></textarea>
<br/> <br/>
<span id="ad_error"></span><br/><br/>
<label>Email Address</label><br/>
<input type="text" id="email" name="email"/><br/><br/>
<span id="em_error"></span><br/><br/>
<label> Password: </label><br/>
<input type="password" id="pword" name="pword"/> <br/> <br/>
<span id="p_error"></span><br/><br/>
<label>Confirm Password: </label><br/>
<input type="password" id="cword" name="cword"/> <br/> <br/>
<span id="c_error"></span><br/><br/>
<input type="submit" value="Submit"/>
<input type="reset" value="Reset"/>
</fieldset>
</form>
</div>
<div id="footer">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</div>
</body>
Javascript 代码:
function validateForm()
{
//delacring variables
var firstName, lastName, address, email, pword, cword;
check=false;
error=false;
firstName=document.getElementById("fname").value;
lastName=document.getElementById("lname").value;
address=document.getElementById("address").value;
email=document.getElementById("email").value;
pword=document.getElementById("pword").value;
cword=document.getElementById("cword").value;
//checking to see if anything was entered
if(firstName=="" || firstName==null)
{
//sending an error message to the user if the cell is empty
document.getElementById("f_error").innerHTML="You must enter your first name";
error=true;
return false;
}
else
document.getElementById("f_error").innerHTML="";
if(lastName=="" || lastName==null)
{
//sending an error message to the user if the cell is empty
document.getElementById("l_error").innerHTML="You must enter your last name";
error=true;
return false;
}
else
document.getElementById("l_error").innerHTML="";
if(address=="" || address==null)
{
document.getElementById("ad_error").innerHTML="You must enter your Address";
error=true;
return false;
}
else
document.getElementById("ad_error").innerHTML="";
if(email=="" || email==null)
{
document.getElementById("em_error").innerHTML="You must enter your Email Address";
error=true;
return false;
}
else
document.getElementById("em_error").innerHTML="";
if(pword=="" || pword==null)
{
document.getElementById("p_error").innerHTML="You must enter a password";
error=true;
return false;
}
else
document.getElementById("l_error").innerHTML="";
if(cword=="" || cword==null)
{
document.getElementById("c_error").innerHTML="Please confirm your password";
error=true;
return false;
}
else
document.getElementById("c_error").innerHTML="";
return true;
}
谁能帮我找出错误。
最佳答案
您的表单正在提交，即使您的函数返回 false。
改变:
onsubmit="validateForm();"
到:
onsubmit="return validateForm();"
这应该可以解决它。
关于javascript不断刷新屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36367540/