Javascript checkValidity（）和reportValidity（）在for循环中不起作用

我有一个多步骤表单，我想在当前步骤中添加HTML 5表单验证。我在代码中的for循环中使用了checkValidity（）和reportValidity（），但它只适用于当前步骤的最后一个字段。下面是我的表单代码和JavaScript代码，请让我知道我在这里做错了什么

JavaScript

    <script>
    var currentTab = 0; // Current tab is set to be the first tab (0)
    showTab(currentTab); // Display the current tab

    function showTab(n) {
      // This function will display the specified tab of the form...
      var x = document.getElementsByClassName("tab");
      x[n].style.display = "block";
      //... and fix the Previous/Next buttons:
      if (n == 0) {
        document.getElementById("prevBtn").style.display = "none";
      } else {
        document.getElementById("prevBtn").style.display = "inline";
      }
      if (n == (x.length - 1)) {
        document.getElementById("nextBtn").innerHTML = "Submit";
        document.getElementById("nextBtn").name = "signup";
        document.getElementById("nextBtn").type = "submit";
      } else {
        document.getElementById("nextBtn").innerHTML = "Next";
        document.getElementById("nextBtn").name = "";
        document.getElementById("nextBtn").type = "button";
      }
      //... and run a function that will display the correct step indicator:
      fixStepIndicator(n)
    }

    function nextPrev(n) {
      // This function will figure out which tab to display
      var x = document.getElementsByClassName("tab");
      // Exit the function if any field in the current tab is invalid:
      if (n == 1 && !validateForm()) return false;
      // Hide the current tab:
      x[currentTab].style.display = "none";
      // Increase or decrease the current tab by 1:
      currentTab = currentTab + n;
      // if you have reached the end of the form...
      if (currentTab >= x.length) {
        // ... the form gets submitted:
        document.getElementById("regForm").submit();
        return false;
      }
      // Otherwise, display the correct tab:
      showTab(currentTab);
    }

    // VALIDATION CHECK HERE
    function validateForm() {
      // This function deals with validation of the form fields
      var x, y, i, valid = true;
      x = document.getElementsByClassName("tab");
      y = x[currentTab].getElementsByTagName("input");
      // A loop that checks every input field in the current tab:
      for (i = 0; i < y.length; i++) {

        if(y[i].checkValidity()) {
            return true;
        }
        else {
            y[i].reportValidity();
            valid = false;
        }

      }

      // If the valid status is true, mark the step as finished and valid:
      if (valid) {
        document.getElementsByClassName("step")[currentTab].className += " finish";
      }
      return valid; // return the valid status
     }

    function fixStepIndicator(n) {
      // This function removes the "active" class of all steps...
      var i, x = document.getElementsByClassName("step");
      for (i = 0; i < x.length; i++) {
        x[i].className = x[i].className.replace(" active", "");
      }
      //... and adds the "active" class on the current step:
      x[n].className += " active";
    }
    </script>

var currentTab=0；//当前选项卡设置为第一个选项卡（0）
显示选项卡（当前选项卡）；//显示当前选项卡
功能显示选项卡（n）{
//此函数将显示表单的指定选项卡。。。
var x=document.getElementsByClassName（“选项卡”）；
x[n].style.display=“块”；
//…并修复上一个/下一个按钮：
如果（n==0）{
document.getElementById（“prevBtn”）.style.display=“无”；
}否则{
document.getElementById（“prevBtn”）.style.display=“inline”；
}
如果（n==（x.length-1））{
document.getElementById（“nextBtn”）.innerHTML=“提交”；
document.getElementById（“nextBtn”）.name=“signup”；
document.getElementById（“nextBtn”）.type=“提交”；
}否则{
document.getElementById（“nextBtn”）.innerHTML=“Next”；
document.getElementById（“nextBtn”）.name=“”；
document.getElementById（“nextBtn”）.type=“button”；
}
//…并运行一个功能，该功能将显示正确的步进指示器：
固定步进指示器（n）
}
函数nextPrev（n）{
//此函数将确定要显示的选项卡
var x=document.getElementsByClassName（“选项卡”）；
//如果当前选项卡中的任何字段无效，请退出该功能：
如果（n==1&&！validateForm（））返回false；
//隐藏当前选项卡：
x[currentTab].style.display=“无”；
//将当前选项卡增加或减少1：
currentTab=currentTab+n；
//如果您已到达表单的末尾。。。
如果（currentTab>=x.length）{
//…表格将在以下时间提交：
document.getElementById（“regForm”）.submit（）；
返回false；
}
//否则，显示正确的选项卡：
显示选项卡（当前选项卡）；
}
//验证检查在这里
函数validateForm（）{
//此函数用于验证表单字段
变量x，y，i，valid=true；
x=document.getElementsByClassName（“选项卡”）；
y=x[currentTab].getElementsByTagName（“输入”）；
//检查当前选项卡中每个输入字段的循环：
对于（i=0；i

HTML

<form id="regForm" action="/action_page.php">
  <h1>Register:</h1>
  <!-- One "tab" for each step in the form: -->
  <div class="tab">Name:
    <p><input type="text" placeholder="First name..." oninput="this.className = ''" name="fname" pattern="[a-zA-Z][a-zA-Z ]{2,30}" required="required"></p>
    <p><input type="text" placeholder="Last name..." oninput="this.className = ''" name="lname" pattern="[a-zA-Z][a-zA-Z ]{2,30}" required="required"></p>
  </div>
  <div class="tab">Contact Info:
    <p><input type="email" placeholder="E-mail..." oninput="this.className = ''" name="email" required="required"></p>
    <p><input type="text" placeholder="Phone..." oninput="this.className = ''" name="phone" pattern="[6-9][0-9]{9}" required="required"></p>
  </div>
  <div class="tab">Birthday:
    <p><input type="text" placeholder="dd" oninput="this.className = ''" name="dd" required="required"></p>
    <p><input type="text" placeholder="mm" oninput="this.className = ''" name="nn" required="required"></p>
    <p><input type="text" placeholder="yyyy" oninput="this.className = ''" name="yyyy" required="required"></p>
  </div>
  <div class="tab">Login Info:
    <p><input type="text" placeholder="Username..." oninput="this.className = ''" name="uname" required="required"></p>
    <p><input placeholder="Password..." oninput="this.className = ''" name="pword" type="password" required="required"></p>
  </div>
  <div style="overflow:auto;">
    <div style="float:right;">
      <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
      <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
    </div>
  </div>
  <!-- Circles which indicates the steps of the form: -->
  <div style="text-align:center;margin-top:40px;">
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
  </div>
</form>

登记册：
姓名：


联系方式：


生日：



登录信息：


以前的
下一个

CSS

<style>
* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
}

#regForm {
  background-color: #ffffff;
  margin: 100px auto;
  font-family: Raleway;
  padding: 40px;
  width: 70%;
  min-width: 300px;
}

h1 {
  text-align: center;  
}

input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
  background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
  display: none;
}

button {
  background-color: #4CAF50;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

#prevBtn {
  background-color: #bbbbbb;
}

/* Make circles that indicate the steps of the form: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;  
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #4CAF50;
}
</style>

* {
框大小：边框框；
}
身体{
背景色：#f1f1；
}
#正则表达式{
背景色：#ffffff；
保证金：100像素自动；
字体系列：雷威；
填充：40px；
宽度：70%；
最小宽度：300px；
}
h1{
文本对齐：居中；
}
输入{
填充：10px；
宽度：100%；
字号：17px；
字体系列：雷威；
边框：1px实心#AAAAA；
}
/*标记在验证时出错的输入框：*/
输入无效{
背景色：#ffdddd；
}
/*默认情况下隐藏所有步骤：*/
.标签{
显示：无；
}
钮扣{
背景色：#4CAF50；
颜色：#ffffff；
边界：无；
填充：10px 20px；
字号：17px；
字体系列：雷威；
光标：指针；
}
按钮：悬停{
不透明度：0.8；
}
#prevBtn{
背景色：#bbbbbb；
}
/*制作圆圈，指示表格的步骤：*/
.步骤{
高度：15px；
宽度：15px；
边际：0.2px；
背景色：#bbbbbb；
边界：无；
边界半径：50%；
显示：内联块；
不透明度：0.5；
}
.step.active{
不透明度：1；
}
/*标记已完成且有效的步骤：*/
.一步完成{
背景色：#4CAF50；
}

您的“if（y[i].checkValidity（）{return true；}”有一个问题，如果出现这个问题，return语句不仅会退出循环，还会退出函数，并且永远不会碰到if（valid）{…}好的，应该有什么请让我知道好的，现在解决这个问题谢谢您if（y[i].checkValidity（）{valid=true；}否则{y[i].reportValidity（）；valid=false；返回false；}