проверьте пустое поле мгновенно в jquery

Question

Я должен проверить поля моей формы, если они пусты, и отобразить сообщение об ошибке перед каждым пустым полем, но я не могу найти, как проверить поля формы и отобразить сообщение об ошибке, с которыми они пустыJQuery. Я пытался с Keyup, но он не делает это мгновенно. Вы знаете, как это сделать в jQuery?

$(function() {
  $("#myButton").click(function() {
    valid = true;
    if ($("#name").val() == "") {
      $("#name").next(".error-message").fadeIn().text("Please enter your name")
      valid = false;
    } else if (!$("#name").val().match(/^[a-z]+$/i)) {
      $("#name").next(".error-message").fadeIn().text("Please enter a valid name")
      valid = false;
    } else {
      $("#name").next(".error-message").fadeOut();
    }
    if ($("#firstName").val() == "") {
      $("#firstName").next(".error-message").fadeIn().text("Please enter your first name")
      valid = false;
    } else if (!$("#firstName").val().match(/^[a-z]+$/i)) {
      $("#firstName").next(".error-message").fadeIn().text("Please enter a valid first name")
      valid = false;
    } else {
      $("#firstName").next(".error-message").fadeOut();
    }
    if ($("#phone").val() == "") {
      $("#phone").next(".error-message").fadeIn().text("Please enter your phone")
      valid = false;
    } else if (!$("#phone").val().match(/^[0-9]+$/i)) {
      $("#phone").next(".error-message").fadeIn().text("Please enter a valid phone")
      valid = false;
    } else {
      $("#phone").next(".error-message").fadeOut();
    }
    return valid;
  });
});

.error-message {
  display: none;
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="myForm">
  <fieldset>
    <legend>Contact us</legend>
    <label>Your name:</label>
    <input type="text" name="name" id="name">
    <span class="error-message">error</span>
    <br />
    <label>Your First name:</label>
    <input type="text" name="firstName" id="firstName">
    <span class="error-message">error</span>
    <br />
    <label>Your phone:</label>
    <input type="text" name="phone" id="phone">
    <span class="error-message">error</span>
    <br />
    <input type="submit" value="Submit" id="myButton">
  </fieldset>
</form>

Answer 1

проверьте мой ввод, например, вы можете использовать onkeyup (при удалении контента), моя функция проверяет, насколько надежный пароль и если он не пустой

function checkPasswd(el, but) {
  let password = $(el).val();
  const strongRegex = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");

  if (strongRegex.test(password)) {
    $(el).css({
      'background-color': '#58bc62'
    });
    $(but).attr("disabled", false);
  } else {
    if (password == "") {
      $(el).css({
        'background-color': 'white'
      });
      $(but).attr("disabled", true);
    } else {
      $(el).css({
        'background-color': '#e57777'
      });
      $(but).attr("disabled", true);
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="password" name="password" id="password" placeholder="new password..." onkeyup="checkPasswd('#password', '.saveToDbButton')" class="add_user" required>

Answer 2

Мне удалось

        $("#name").focusout(function () {
        if (!$(this).val()) {
            $("#name").next(".error-message").fadeIn().text("Please enter your name");
            name = false;
        }
        else if(!$("#name").val().match(/^[a-z]+$/i)){
                $("#name").next(".error-message").fadeIn().text("Please enter a valid name");
                name = false;
        }
        else{
            $("#name").next(".error-message").fadeOut();
        }
    });

    $("#firstName").focusout(function () {
        if (!$(this).val()) {
            $("#firstName").next(".error-message").fadeIn().text("Please enter your first name");
            firstName = false;
        }
        else if(!$("#firstName").val().match(/^[a-z]+$/i)){
            $("#firstName").next(".error-message").fadeIn().text("Please enter a valid first name");
            firstName = false;
        }
        else{
            $("#firstName").next(".error-message").fadeOut();
        }

    });

    $("#phone").focusout(function () {
        if (!$(this).val()) {
            $("#phone").next(".error-message").fadeIn().text("Please enter your phone");
            phone = false;
        }
       else if(!$("#phone").val().match(/^[0-9]{10}$/i)){
        $("#phone").next(".error-message").fadeIn().text("Please enter your phone");
        phone = false;
       }
       else{
        $("#phone").next(".error-message").fadeOut();
       }

    });