jQuery，如何設置輸入需要多個輸入的通知

Question

假設我有 3 個輸入，其中兩個是必需的，所以我想為每個必需的輸入添加一個類（無效），並在下面顯示標簽文本，如果該字段為空或用戶為空（更改時）

<input type="text" name="name" id="name"  class="requiredfiled">

<div class="error_required s-help-block cart_hidden">
    <label style="color: #fb6100;">Name is required</label>
</div>

<input type="text" name="phone" id="phone"  class="requiredfiled"> 

<div class="error_required s-help-block hidden">
    <label style="color: #fb6100;">Phone is required</label>
</div>

<input type="text" name="address" id="address"  class=""> 

我試過這段代碼，但沒有和我一起工作

$(".requiredfiled").change(function() {
    $('input[type="text"]').each(function() {
        if ($(this).val() == "" && $(this).hasClass("requiredfiled")) {
            $(this).addClass("invalid");
            $(".error_required").removeClass("hidden");
        } else {
            $(this).removeClass("invalid");
            $(".error_required").addClass("hidden");
        }
    });
});

Answer 1

我已將$('.error_required')更改$(this).next('.error_required')以便我們可以在輸入字段后選擇正確的.error_required 。

工作演示

 $('.requiredfiled').change(function() { $('input[type="text"]').each(function() { if (($(this).val() == "") && ($(this).hasClass('requiredfiled'))) { $(this).addClass('invalid'); $(this).next('.error_required').removeClass('hidden'); } else { $(this).removeClass('invalid'); $(this).next('.error_required').addClass('hidden'); } }); });

 .hidden{visibility: hidden;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" name="name" id="name" class="requiredfiled"> <div class="error_required s-help-block cart_hidden "> <label style="color: #fb6100;">Name is required</label> </div> <input type="text" name="phone" id="phone" class="requiredfiled"> <div class="error_required s-help-block"> <label style="color: #fb6100;">Phone is required</label> </div> <input type="text" name="address" id="address" class="">

Answer 2

你可以試試這個邏輯：

• 無需遍歷所有必需的文本字段，因為在 change event期間您已經在一個文本字段中。
• 無需使用$(this).hasClass('requiredfiled')因為您已經在該選擇器上運行事件處理程序。 因此，輸入已經具有該類，否則不會觸發事件。
• 您可以使用keyup事件來獲得更好的效果和驗證。
• 您可以使用$(this).next('.error_required')在當前文本字段之后橫穿下一個error_required
• 您可以使用.toggleClass(className, state)語法來最小化代碼。

演示在這里：

 $('.requiredfiled').keyup(function() { $(this).toggleClass('invalid', $(this).val() == ""); $(this).next('.error_required').toggleClass('hidden', $(this).val() != ""); }); $('#updateaddress').click(function() { // Check if all required fields have some valid text var isFilled = $('.requiredfiled').filter(function () { return $.trim($(this).val()).length == 0 }).length === 0; if(isFilled){ alert('Address was saved successfully!') } else { // Show the validation error in UI to inform the users $('.requiredfiled').each(function() { $(this).toggleClass('invalid', $(this).val() == ""); $(this).next('.error_required').toggleClass('hidden', $(this).val() != ""); }); alert('Please enter the required fields!') } });

 .hidden {display: none} .invalid {border: 2px solid red}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" name="name" id="name" class="requiredfiled" placeholder="Name"/> <div class="error_required s-help-block hidden"> <label style="color: #fb6100;">Name is required</label> </div> <br> <input type="text" name="phone" id="phone" class="requiredfiled" placeholder="Phone"/> <div class="error_required s-help-block hidden"> <label style="color: #fb6100;">Phone is required</label> </div> <br><br> <input type="text" name="address" id="address" class="" placeholder="Address" /> <br><br> <button type="button" id="updateaddress">Update</button>

Answer 3

這是html代碼

  <div class="error_required s-help-block name_error">
    <label style="color: #fb6100;">Name is required</label>
  </div>

  <input type="text" name="phone" id="phone" class="requiredfiled"> 

  <div class="error_required s-help-block phone_error">
    <label style="color: #fb6100;">Phone is required</label>
  </div>

  <input type="text" name="address" id="address"  class=""> 

這是 Jquery 代碼

$(document).ready(function(){   
    $(".requiredfiled").on("input", function(){
        if ($("#name").val().length > 0) {
            $(".name_error").css("visibility", "hidden");   
        } else if ($("#name").val().length == 0) {
            $(".name_error").css("visibility", "visible");  
            $("#name").addClass("invalid"); 
        }

        if ($("#phone").val().length > 0) {
            $(".phone_error").css("visibility", "hidden");      
        } else if ($("#phone").val().length == 0) {
            $(".phone_error").css("visibility", "visible");  
            $("#phone").addClass("invalid");    
        }
    });
});     

無效輸入字段的 CSS

.invalid {
   border: 2px solid red;
}

我們在這里做的是使用$(".requiredfiled").on("input", function()檢測輸入變化$(".requiredfiled").on("input", function()然后我們檢測輸入字段的長度，並基於此我們可以執行任何操作。這里我有更改了錯誤消息的可見性。當輸入字段為空時，將出現錯誤消息。