Kiểm tra xem TẤT CẢ các đầu vào biểu mẫu có rỗng với jQuery

Question

Tôi đang cố gắng xác thực biểu mẫu liên hệ và tôi muốn tạo một loại thông báo 'hoàn tất biểu mẫu' sau khi mọi trường nhập đã được điền (một số đầu vào là hộp văn bản , một số là nút radio).

Dưới đây là mã của tôi cho đến nay:

$(document).ready(function() { 
 
    $('.form:input').each(function() { 
 
    if ($(this).val() != "") { 
 
     $('.congrats').css("display", "block"); 
 
    } 
 
    }); 
 
});

p.congrats { 
 
    display: none; 
 
}

<div class="form"> 
 
    <input type="text" /> 
 
    <br /> 
 
    <input type="text" /> 
 
</div> 
 
<p class="congrats">Congrats!</p>

http://jsfiddle.net/7huEr/

Answer 1

Điều này sẽ giúp bạn bắt đầu:

$(document).ready(function() { 
 
    $(".form > :input").keyup(function() { 
 
     var $emptyFields = $('.form :input').filter(function() { 
 
      return $.trim(this.value) === ""; 
 
     }); 
 

 
     if (!$emptyFields.length) { 
 
      console.log("form has been filled"); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form"> 
 
    <input type="text" /><br /> 
 
    <input type="text" /> 
 
</div> 
 
<p class="congrats"></p>

Answer 2

thử điều này:

$("#a").on('click',function() { 
 
var bad=0; 
 
$('.form :text').each(function(){ 
 
     if($.trim($(this).val()) == "") bad++; 
 
      
 
      
 
    }); 
 
    
 
    if (bad>0) $('.congrats').css("display","block").text(bad+' missing'); 
 
    else $('.congrats').hide(); 
 
}); 
 

 

 

 
    
 
    
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form"> 
 
    <input type="text" /><br /> 
 
    <input type="text" /> 
 
</div> 
 
<p class="congrats"></p><input style="width:100px" value="check" id="a" type="button" />

Answer 3

$('#check').click(function() { 
 
    var allFilled = true; 
 
    
 
    $(':input:not(:button)').each(function(index, element) { 
 
     if (element.value === '') { 
 
      allFilled = false; 
 
     } 
 
    }); 
 
    
 
    console.log(allFilled); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form"> 
 
    <input type="text" /><br /> 
 
    <input type="text" /> 
 
</div> 
 
<p class="congrats"></p> 
 
<input type="button" id="check" value="check" />

Answer 4

jsFiddle: http://jsfiddle.net/7huEr/38/

$(document).ready(function() 
{ 
    // Iterate over each input element in the div 
    $('.form input').each(function() 
    { 
     // Add event for when the input looses focus (ie: was updated) 
     $(this).blur(function() 
     { 
      // Variable if all inputs are valid 
      var complete = true; 

      // Iterate over each input element in div again 
      $('.form input').each(function() 
      { 
       // If the input is not valid 
       if (!$(this).val()) 
       { 
        // Set variable to not valid 
        complete = false; 
       } 
      }); 

      // If all variables are valid 
      if (complete == true) 
      { 
       // Show said congrats 
       $('.congrats').show(); 
      } 
     }); 
    }); 
});​ 

Answer 5

một này sử dụng serializeArray chức năng của jQuery, vì vậy bạn không cần phải lo lắng về việc kiểm tra các loại khác nhau của các lĩnh vực hoặc những gì đủ tiêu chuẩn là một lĩnh vực có sản phẩm nào:

$.fn.isBlank = function() { 
    var fields = $(this).serializeArray(); 

    for (var i = 0; i < fields.length; i++) { 
     if (fields[i].value) { 
      return false; 
     } 
    } 

    return true; 
}; 

Answer 6

Giải pháp Vanilla hiện đại:

// Returns True if all inputs are not empty 
Array.from(document.querySelectorAll('#myform input')).every(
    function(el){return el.value;} 
)