我点击没有填写的注册表格,然后警告一个接一个显示..但我希望一次显示。
function validate() {
if (ftname.value == "") {
document.getElementById("fnameerror").innerHTML = "*Please fill the value.";
return false;
}
if (ltname.value == "") {
document.getElementById("lnameerror").innerHTML = "*Please fill the value.";
return false;
}
if (address.value == "") {
document.getElementById("adderror").innerHTML = "*Please fill the value.";
return false;
}
if (city.value == "") {
document.getElementById("cityerror").innerHTML = "*Please fill the value.";
return false;
}
if (state.value == "") {
document.getElementById("stateerror").innerHTML = "*Please fill the value.";
return false;
}
var zipno = /^[0-9]{6}$/;
if (zip.value.match(zipno)) {} else {
document.getElementById("ziperror").innerHTML = "*Zip code should be right.";
return false;
}
var phoneno = /^[789][0-9]{9}$/;
if (phone.value.match(phoneno)) {} else {
document.getElementById("pherror").innerHTML = "*phoneno should be right.";
return false;
}
if (email.value == "") {
document.getElementById("emailerror").innerHTML = "*Please fill the value.";
return false;
}
if (box.checked == false) {
document.getElementById("boxerror").innerHTML = "*Please fill the value.";
return false;
}
return (true);
}
.container {
background-color: gray;
width: 500px;
align-content: center;
background: rgba(255, 255, 255, 0.1);
}
h1 {
text-align: center;
color: darkslategray;
text-decoration-line: underline;
}
input {
width: 100%
}
#button {
text-align: right;
}
body {
background-image: url("bg1.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 1.6% 2% 1.5% 2%;
}
<div class="container">
<form method="post" name="myForm" onsubmit="return validate()">
<div class="form-group">
<h1><b><u>
Create an account
</u>
</h1>
<hr>
<div class="row">
<div class="col-md-6">
First Name:
<input type="text" name="name" id="ftname" value="" placeholder="First Name">
<span id="fnameerror" class="text-danger">
</span>
</div>
<div class="col-md-6">
Last Name:
<input type="text" name="lastname" id="ltname" placeholder="Last Name" >
<span id="lnameerror" class="text-danger">
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
Company Name:
<input type="text" name="companyname" id="" placeholder="Company Name">
<span id="" class="text-danger">
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
Street address:
<input type="text" name="address" id="address" placeholder="Street address">
<span id="adderror" class="text-danger">
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
Town/City:
<input type="text" name="city" id="city" placeholder="Town/City">
<span id="cityerror" class="text-danger">
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
State/Country:
<input type="text" name="state" id="state" placeholder="State/Country">
<span id="stateerror" class="text-danger">
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
Postcode/Zip:
<input type="text" name="zip" id="zip" placeholder="Postcode/Zip">
<span id="ziperror" class="text-danger">
</span>
</div>
</div>
<div class="row">
<div class="col-md-6">
Phone:
<input type="text" name="phone" id="phone" placeholder="Phone">
<span id="pherror" class="text-danger">
</span>
</div>
<div class="col-md-6">
Email:
<input type="email" name="email" id="email" placeholder="Email">
<span id="emailerror" class="text-danger">
</span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-1">
<input type="checkbox" name="box" id="box" placeholder="">
<span id="boxerror" class="text-danger">
</span>
</div>
<div class="col-md-9">
Create an account
</div>
</div>
<div class="row" id="button">
<div class="col-md-12">
<button type="submit">
<b>SignUp</b>
</button>
</div>
</div>
如果我单击没有填写的注册表格,然后提醒一个接一个显示..但我希望一次显示。
答案 0 :(得分:0)
在validate函数中,而不是在ifs中返回,应该有一个跟踪变量isValid
function validate(){
var isValid = true;
if (ftname.value=="") {
document.getElementById("fnameerror").innerHTML="*Please fill the value.";
isValid = false;
}
if (ltname.value=="") {
document.getElementById("lnameerror").innerHTML="*Please fill the value.";
isValid = false;
}
//... the same pattern
return isValid;
}
答案 1 :(得分:0)
在函数的顶部设置一个变量以跟踪验证是否失败,然后根据您的if语句设置该变量,然后在底部返回其最终值。
从函数返回ANY值后,它将立即停止并且不运行函数内的任何代码。
function validate() {
var errors = false;
if(some condition) {
// update UI
errors = true;
}
return errors;
}