关闭某些字段的表单验证

Question

I've a simple form that performs validation before user is able to proceed to the next tab.

<h1>Register:</h1>
<!-- One "tab" for each step in the form: -->
<div class="tab">Name:
  <p><input name="fname"></p>
  <p><input name="lname"></p>
</div>
<div class="tab">Contact Info:
  <p><input name="email"></p>
  <p><input name="phone"></p>
</div>
<div class="tab">Birthday:
  <p><input name="dd"></p>
  <p><input name="nn"></p>
  <p><input name="yyyy"></p>
</div>

The script used to validate is this:

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 a field is empty...
    if (y[i].value == "") {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false
     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
}

However, not all fields need validation. How can I "turn off" validation for the phone input via the script?

Answer 1

I'm not sure if by 'invalid' you mean just empty fields. If so, you can use the html attribute required to handle empty fields like this:

<input name="email" required />

You can also add an additional condition that checks if the name attribute of the element is 'phone' to skip it.

Answer 2

Currently the validateForm function is just checking for empty fields, so you can just use the required attribute, as stated by Kent.

If you are doing other stuff in the validation, you can add a class="no-validate" to the specific input you don't want to validate and in your JavaScript, you select only the input that does not have the class "no-validate" .

function validateForm () {
    //...
    y = x[currentTab].querySelectorAll("input:not(.no-validate)");
    //
}

Or you can do it the other way by rather giving a validate class to all the inputs that needs validation and select them in your code with:

y = x[currentTab].getElementsByClassName("validate");

---

Apart from that, before you take time to implement any custom validation, you can make use of the form validation that is already there for you in HTML5. You can learn more about it here