Validation issues in JavaScript

The following function is supposed to check two inputs: name and message. I’m not sure what is wrong here but I’m trying to first see if the input is empty if it’s not I want to then check it with a regular expression.

The message I just want to see if it is empty or not. If either are empty I want to return a message asking to enter the correct input. I’m not sure if I should use else ifs here or separate if statements altogether. If I’m doing this completely bonkers Id like to know that as well.

JavaScript:

function validate() {
  let regName = /^[a-zA-Z]+ [a-zA-Z]+$/;
  let name = document.querySelector("[name='user-name']");
  let msg = document.querySelector("[name='user-message']");
  
  if (name) {
      name = name.value;   
  } else if (!regName.test(name)){
    document.querySelector("[name='user-name']");
    return "Please enter your first & last name.";    
  }

  if (msg) {
      msg = msg.value;
  } else if (msg.trim() == "") {     
    document.querySelector("[name='user-message']");
    return "Please enter a message";
  } 
} 

Answer

Your if and else if logic is wrong. You’re only performing the regexp test when the input element can’t be found by document.querySelector(). else if only runs when the previous condition failed.

You should put that check in the same if that checks that the input was found.

function validate() {
  let regName = /^[a-zA-Z]+ [a-zA-Z]+$/;
  let name = document.querySelector("[name='user-name']");
  let msg = document.querySelector("[name='user-message']");

  if (name && !regName.test(name.value)) {
    return "Please enter your first & last name.";
  }

  if (msg && msg.value.trim() == "") {
    return "Please enter a message";
  }
}