javascript一次不显示所有警报

Question

我点击没有填写的注册表格，然后警告一个接一个显示..但我希望一次显示。

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>

如果我单击没有填写的注册表格，然后提醒一个接一个显示..但我希望一次显示。

Answer 1

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

Answer 2

在函数的顶部设置一个变量以跟踪验证是否失败，然后根据您的if语句设置该变量，然后在底部返回其最终值。

从函数返回ANY值后，它将立即停止并且不运行函数内的任何代码。

function validate() {
    var errors = false;
    if(some condition) {
        // update UI
        errors = true;
    }
    return errors;
}