JavaScript: Как отобразить отдельные сообщения об ошибках, когда поле формы недействительно или пусто

Question

Я пытаюсь отобразить одно сообщение об ошибке, когда пользователь отправляет форму с недействительным адресом электронной почты, но отображает другое сообщение об ошибке, если пользователь отправляет поле ПУСТОЙ электронной почты.

Каким-то образом мне нужно изменить сообщение об ошибке электронной почты при отправке формы.

const invalidEmail = document.createElement('span');
invalidEmail.className = "error";
invalidEmail.id = "invalidEmail";
invalidEmail.textContent = "Please enter a valid Email";
//////////////////////////////////////////////////////
const emptyEmail = document.createElement('span');
emptyEmail.className = "error";
emptyEmail.id = "emptyEmail";
emptyEmail.textContent = "Email is required";
//////////////////////////////////////////////////////

function validateEmail() {
  // get value from email input
  const email = $("#mail").val();
  const regexEmail = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
  if (regexEmail.test(email)) {
    return true;
  } else if (email === "") {

    alert('enter email');

    return false;
  }
}


$("#mail").keyup(function() {
  if (emptyEmail()) {
    // if the user email is valid set the input text and       border to red
    email.style.border = "2px solid green";
    emptyEmail.style.display = "none";
    return true;
  } else {
    // if the user email is not valid set the input text and   border to red
    email.before(emptyEmail);
    emptyEmail.style.fontSize = "1em"
    emptyEmail.style.color = "red";
    email.style.border = "2px solid red";
    emptyEmail.style.display = "block";
    return false;
  }
});

$("#mail").keyup(function() {
  if (validateEmail()) {
    // if the user email is valid set the input text and border to red
    email.style.border = "2px solid green";
    invalidEmail.style.display = "none";
    return true;
  } else {
    // if the user email is not valid set the input text and   border to red
    email.before(invalidEmail);
    invalidEmail.style.fontSize = "1em"
    invalidEmail.style.color = "red";
    email.style.border = "2px solid red";
    invalidEmail.style.display = "block";
    return false;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="mail">Email:</label>
<input type="email" id="mail" name="user-email" placeholder="Enter Valid Email">

Answer 1

Следующий код сделает то, что вам нужно. Я добавил поле электронной почты в форму и добавил кнопку отправки только для имитации ситуации:

const invalidEmail = document.createElement('span');
invalidEmail.className="error";
invalidEmail.id="invalidEmail";
invalidEmail.textContent="Please enter a valid Email";
//////////////////////////////////////////////////////
const emptyEmail = document.createElement('span');
emptyEmail.className="error";
emptyEmail.id="emptyEmail";
emptyEmail.textContent="Email is required";
//////////////////////////////////////////////////////

function validateEmail(){
  // get value from email input
  const email = $("#mail").val();
  const regexEmail = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
  if(regexEmail.test(email)){
      return true;
  } else if (email === "") { 
      
      alert('enter email');
     
      return false;
  }
}

function isEmptyEmail(obj){
  if(obj.val() == '') return true;
  else return false;
}

$("form").submit(function(e){
     let email = $("#mail");
   if(isEmptyEmail(email)){
       e.preventDefault();
       // if the user email is valid set the input text and       border to red
       invalidEmail.style.border = "2px solid green";
       invalidEmail.style.display = "none";
       
       email.before(emptyEmail);
       emptyEmail.style.fontSize = "1em"
       emptyEmail.style.color = "red";
       emptyEmail.style.border = "2px solid red";
       emptyEmail.style.display = "block";
       return true;
   }else if(!validateEmail()){
       e.preventDefault();
      // if the user email is valid set the input text and border to red      
       emptyEmail.style.border = "2px solid green";
       emptyEmail.style.display = "none";
       
       email.before(invalidEmail);
       invalidEmail.style.fontSize = "1em"
       invalidEmail.style.color = "red";
       invalidEmail.style.border = "2px solid red";
       invalidEmail.style.display = "block";
      return true;
  } else{
       // if the user email is not valid set the input text and   border to red
       
       invalidEmail.style.border = "2px solid green";
      invalidEmail.style.display = "none";
       emptyEmail.style.border = "2px solid green";
       emptyEmail.style.display = "none";
       return false;   
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <label for="mail">Email:</label>
  <input type="text" id="mail" name="user-email" placeholder="Enter Valid Email">
  <input type="submit">
</form>