立即檢查 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(/^[az]+$/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(/^[az]+$/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 檢查密碼的強度以及它是否不為空

 function checkPasswd(el, but) { let password = $(el).val(); const strongRegex = new RegExp("^(?=.*[az])(?=.*[AZ])(?=.*[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();
       }

    });