How can I exclude required fields in a validation script?

Question

I'm trying to create a multi step form with validation based on required fields. The current Javascript I'm using is just looking for fields that are filled in to validate the form. But how do I make it ignore fields that are not marked as "required" in the html?

Thank you!

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
}

You're going to make a lot of enemies with those one-letter variable names. Just don't. — isherwood, Oct 15 '21 at 20:10

SingleRecordNet · Answer 1 · 2021-10-15T22:08:32.160

0

But how do I make it ignore fields that are not marked as "required" in the html?

The following solution checks for the required property in the input elements. So in the for loop, the first thing you would do is if(!y[i].required){ continue; }, in other words if y[i].required is undefined, then continue (or skip this iteration).

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].required is undefined... skip to the next <--
    if(!y[i].required){ continue; }
    // 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
}

edited Oct 15 '21 at 22:08

answered Oct 14 '21 at 19:16

SingleRecordNet

1
2

Please edit your answer and add in some text to explain what problems you found in the OP's code and how your answer fixes or addresses those problems. – devlin carnate Oct 14 '21 at 19:29
This worked! Thank you!! I just didn't know how to called the required attribute since it wasn't a class. So it's considered a tag? – JeepGirl Oct 15 '21 at 17:43
@JeepGirl - it's considered an attribute of the tag / element – devlin carnate Oct 15 '21 at 18:12
If the provided solution meets your requirements, please remember to mark it as accepted answer. – SingleRecordNet Oct 15 '21 at 20:08

How can I exclude required fields in a validation script?

1 Answers1