javascript - checkValidity() 和 reportValidity() 在 for 循环中不起作用

Question

我有一个多步骤表单，我想在当前步骤中通过 JavaScript 添加 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>

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>

标签： javascriptjquery