जांच की जा रही है, तो सभी फ़ॉर्म इनपुट jQuery

Question

मैं एक संपर्क फ़ॉर्म मान्य करने के लिए कोशिश कर रहा हूँ के साथ खाली हैं और मैं संदेश एक बार हर इनपुट क्षेत्र में भर दिया गया है 'पूरा प्रपत्र' किसी प्रकार का निर्माण करना चाहते हैं (आदानों की कुछ पाठ बक्से हैं , कुछ रेडियो बटन हैं)।

यहाँ मेरी कोड अब तक बताया गया है:

$(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

यह मिलना चाहिए आप आरंभ:

$(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

इस प्रयास करें:

$("#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

यह एक jQuery के serializeArray फ़ंक्शन का उपयोग करता है, तो आप क्षेत्रों के विभिन्न प्रकार या क्या एक खाली क्षेत्र के रूप में उत्तीर्ण की जाँच के बारे में चिंता करने की जरूरत नहीं है:

$.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

आधुनिक वेनिला समाधान:

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