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

あなたがフィールドまたはどのような空のフィールドとしての資格の種類を確認する心配する必要はありませんので、この1つは、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;} 
)