How to check if inputs is false or true in javascript

Question

I want to see if all the input fields are true, if not add a class "false" and a border around input-field. How do I check if all the inputs are true? Now I only get one border even if its two fields that are wrong. If lastname and age is wrong, I want to add a red border around the input.

function inputCount() {
    var formPets = document.getElementsByTagName("input");
    var firstName = document.getElementsByName("firstname")[0].value;
    var lastName = document.getElementsByName("lastname")[0].value;
    var age = document.getElementsByName("age")[0].value;
    var email = document.getElementsByName("email")[0].value;

    for (var i = 0; i < formPets.length; i++) {

    if(firstName.value == "" || !isNaN(firstName) || firstName.length > 50)
    {
        alert("False");
        var firstNameFalse = document.getElementById("firstname");
        firstNameFalse.classList.add("false");
        return false;
    } 
    else if (lastName.value == "" || !isNaN(lastName) || lastName.length > 50){
        alert("False");
        var lastNameFalse = document.getElementById("lastname");
        lastNameFalse.classList.add("false");
        return false;
    }
    else if (age.value == "" || isNaN(age) || age.length > 0){
        alert("False");
        var ageFalse = document.getElementById("age");
        ageFalse.classList.add("false");
        return false;
    }
    else if (email.value == "" || !isNaN(email) || email.length > 50){
        alert("False");
        var emailFalse = document.getElementById("email");
        emailFalse.classList.add("false");
        return false;
    }
    else {
        alert("OK");
    }
}
}


#firstname.false {
    border-color: red !important;
}
#lastname.false {
    border-color: red !important;
}
#age.false {
    border-color: red !important;
}
#email.false {
    border-color: red !important;
}


<input type="text" name="firstname" id="firstname">Firstname<br>
<input type="text" name="lastname" id="lastname"> Lastname<br>
<input type="text" name="age" id="age"> Age<br>
<input type="text" name="email" id="email"> Email<br>
<button type="submit" onclick="inputCount()">Submit</button>

Answer 1

I'm not sure I understood your question correctly, but if I did, I think you just have to change the else if to if and remove the return statements :

<script type="text/javascript">
  function inputCount() {
    var formPets = document.getElementsByTagName("input");
    var firstName = document.getElementsByName("firstname")[0].value;
    var lastName = document.getElementsByName("lastname")[0].value;
    var age = document.getElementsByName("age")[0].value;
    if (firstName.value == "" || !isNaN(firstName) || firstName.length > 50) {
      var firstNameFalse = document.getElementById("firstname");
      firstNameFalse.classList.add("false");
    }
    if (lastName.value == "" || !isNaN(lastName) || lastName.length > 50) {
      var lastNameFalse = document.getElementById("lastname");
      lastNameFalse.classList.add("false");
    }
    if (age.value == "" || isNaN(age) || age.length > 0) {
      var ageFalse = document.getElementById("age");
      ageFalse.classList.add("false");
    }
    if (email.value == "" || !isNaN(email) || email.length > 50) {
      var emailFalse = document.getElementById("email");
      emailFalse.classList.add("false");
    }
  }
</script>

<style>
  #firstname.false {
    border-color: red !important;
  }
  #lastname.false {
    border-color: red !important;
  }
  #age.false {
    border-color: red !important;
  }
  #email.false {
    border-color: red !important;
  }
</style>

<input type="text" name="firstname" id="firstname" />Firstname<br />
<input type="text" name="lastname" id="lastname" /> Lastname<br />
<input type="text" name="age" id="age" /> Age<br />
<input type="text" name="email" id="email" /> Email<br />
<button type="submit" onclick="inputCount()">Submit</button>

I also removed the useless for loop.

Answer 2

Issues

• No need to use a loop.
• Collect all inputs and check its validity
• Add a class false if not valid.
• Remove class false if valid

function inputCount() {
  var formPets = document.getElementsByTagName("input");
  var firstName = document.getElementsByName("firstname")[0].value;
  var lastName = document.getElementsByName("lastname")[0].value;
  var age = document.getElementsByName("age")[0].value;
  var email = document.getElementsByName("email")[0].value;

  var firstNameFalse = document.getElementById("firstname");
  if (firstName.value == "" || !isNaN(firstName) || firstName.length > 50) {
    console.log("False");
    firstNameFalse.classList.add("false");
    // return false;
  } else {
    firstNameFalse.classList.remove("false");
  }

  var lastNameFalse = document.getElementById("lastname");
  if (lastName.value == "" || !isNaN(lastName) || lastName.length > 50) {
    console.log("False");
    lastNameFalse.classList.add("false");
    // return false;
  } else {
    lastNameFalse.classList.remove("false");
  }

  var ageFalse = document.getElementById("age");
  if (age.value == "" || isNaN(age.value)) {
    console.log("False");
    ageFalse.classList.add("false");
    // return false;
  } else {
    ageFalse.classList.remove("false");
  }

  var emailFalse = document.getElementById("email");
  if (email.value == "" || !isNaN(email) || email.length > 50) {
    console.log("False");
    emailFalse.classList.add("false");
    // return false;
  } else {
    emailFalse.classList.remove("false");
  }
}

#firstname.false {
  border-color: red !important;
}

#lastname.false {
  border-color: red !important;
}

#age.false {
  border-color: red !important;
}

#email.false {
  border-color: red !important;
}

<input type="text" name="firstname" id="firstname">Firstname<br>
<input type="text" name="lastname" id="lastname"> Lastname<br>
<input type="text" name="age" id="age"> Age<br>
<input type="text" name="email" id="email"> Email<br>
<button type="submit" onclick="inputCount()">Submit</button>