Form Validation: messages not displaying when all input fields are left empty

user_11755515 0
Viewed 468

So I am practicing Javascript and right now I am trying to implement form validation. One of the issues I am having is that when I click on the button when all of the input fields are empty, the first one (Full Name) only highlights and displays a message (Please checkout snippet). I was wondering is that how it works - can only one message be displayed at a time or is there a way to get all of the input fields to change color and display messages for each empty field?

function validateForm(e) {
  const eName = document.getElementById("FullName");
  const eMail = document.getElementById("Email");
  const ePhone = document.getElementById("PhoneNumber");
  const ePass = document.getElementById("Password");
  const eCnfmPass = document.getElementById("ConfirmPassword");
  const phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
  const fullNameText = "Oops, please fill out your name";
  const emailText = "Please enter a valid email";
  const phoneText = "Please enter a valid phone number";
  const passText = "Please enter a valid password";
  const confirmText = "Please confirm your password";

  //Name input validation - If input is left empty
  if (eName.value === "") {
    e.preventDefault();
    document.getElementById("FullName").style.borderColor = "red";
    document.getElementById("FullNameLabel").innerHTML = fullNameText;
    document.getElementById("FullNameLabel").style.color = "red";
    return false;
  }
  //Email input validation - If input is left empty
  if (eMail.value === "") {
    e.preventDefault();
    document.getElementById("Email").style.borderColor = "red";
    document.getElementById("EmailLabel").innerHTML = emailText;
    document.getElementById("EmailLabel").style.color = "red";
    return false;
  }
  //Phone number input validation - If input is left empty
  if (ePhone.value === "") {
    e.preventDefault();
    document.getElementById("PhoneNumber").style.borderColor = "red";
    document.getElementById("PhoneNumberLabel").innerHTML = phoneText;
    document.getElementById("PhoneNumberLabel").style.color = "red";
    return false;
  }

  //Phone number input validation - checks to see if there is a missing number or character that is not a number
  if (ePhone.value.match(phoneno)) {
    return true;
  } else {
    alert("Please check your phone number and enter it again")
    // document.getElementById("PhoneNumber").style.borderColor = "red";
    // document.getElementById("PhoneNumberLabel").innerHTML = phoneText;
    // document.getElementById("PhoneNumberLabel").style.color = "red";
    return false;
  }

  //Password input validation - If input is left empty
  if (ePass.value === "") {
    e.preventDefault();
    document.getElementById("Password").style.borderColor = "red";
    document.getElementById("PasswordLabel").innerHTML = passText;
    document.getElementById("PasswordLabel").style.color = "red";
    return false;
  }
  //Confirm password input validation -  If input is left empty
  if (eCnfmPass.value === "") {
    e.preventDefault();
    document.getElementById("ConfirmPassword").style.borderColor = "red";
    document.getElementById("ConfirmPswdLabel").innerHTML = confirmText;
    document.getElementById("ConfirmPswdLabel").style.color = "red";
  }
}


//Checks to make sure that both password and confirm passwords match
var passConfirm = function() {
  if (document.getElementById("Password").value ==
    document.getElementById("ConfirmPassword").value) {
    document.getElementById("Message").style.color = "green";
    document.getElementById("Message").style.fontWeight = "Heavy";
    document.getElementById("Message").innerHTML = "Passwords match!"
  } else {
    document.getElementById("Message").style.color = "red";
    document.getElementById("Message").style.fontWeight = "Heavy";
    document.getElementById("Message").innerHTML = "Passwords do NOT match!"
  }
}
<div class="container">
  <form class="form" onsubmit="validateForm(event)">
    <div>
      <label id="FullNameLabel">Full Name</label></br>
      <input type="text" placeholder="John Doe" id="FullName" />
    </div>
    <div>
      <label id="EmailLabel">Email</label></br>
      <input type="text" placeholder="johndoe@email.com" id="Email" />
    </div>
    <div>
      <label id="PhoneNumberLabel">Phone Number</label></br>
      <input type="text" placeholder="(123) 456-7890" id="PhoneNumber" />
    </div>
    <div>
      <label id="PasswordLabel">Password</label></br>
      <input name="Password" id="Password" type="Password" placeholder="Password" onkeyup='passConfirm();' />
    </div>
    <div>
      <label id="ConfirmPswdLabel">Confirm Password</label></br>
      <input name="ConfirmPassword" id="ConfirmPassword" type="Password" placeholder="Confirm Password" onkeyup='passConfirm();' />
    </div>
    <span id="Message"></span>
    <button type="submit" value="submit">Sign Me Up!</button>
  </form>
</div>

forms javascript
2 Answers

You have too much javascript code, you can simplify that, alot.

to check if any of the inputs are empty, you can first store all the inputs in a variable like that:

let inputs = document.querySelectorAll('.form input') //This will make a Nodelist array of all the inputs inside the form.
let labels = document.querySelectorAll('.form label') //This will make a Nodelist array of the label tags inside the form

after that you can loop through the inputs array to find if any of the inputs are empty:

for (let i = 0; i < inputs.length; i++) {
    if (inputs.value.length == 0) {
        inputs[i].style.borderColor = 'red'
        label[i].textContent = 'Please fill in this input'
    }
}
user_105327680

Require your inputs. Why go through all that trouble making sure they're filled out?

<input required>
user_134213060
Related