jQuery - セクション内のすべての必須フィールドに回答したかどうかを確認します

Question

ライトボックスpopUpのチェックを実行して、オプションでないフィールドがすべて入力されているかどうかを調べる必要があります。私はこの形式でポップアップ表示ごとにidを変更して、私は長い道のりラウンド行くとidによって各入力フィールドをチェックして、これを複製することができ を行うために必要なもの

HTML

<div id="manualAddressEntry01" class="container popUp large hidden shadow02 rounded03"> 
    <div class="popUpHeading"> 
     <h4>Please enter your full address:</h4> 
    </div> 
    <div class="popUpContent rounded03"> 
     <img class="closeContainer cursor" src="resource/nw/images/hires/helpClose.gif"/> 
     <div class="fl"> 
      <label for="form_popup1_HouseName">House Number/Name</label> 
      <input class="jsValid_required" id="form_popup1_HouseName" type="text" size="25"/> 
     </div> 

     <div class="fl" style="padding-left:10px"> 
      <label for="form_popup1_Street">Street</label> 
      <input class="jsValid_required" id="form_popup1_Street" type="text" size="25"/> 
     </div> 

     <br class="cb"/> 

     <input id="form_popup1_AddressLine2" type="text" size="35"/> 

     <label for="form_popup1_TownCity">Town/City</label> 
     <input class="jsValid_alpha" id="form_popup1_TownCity" type="text" size="35"/> 

     <label for="form_popup1_County">County</label> 
     <input class="jsValid_alpha jsOptional countyInput" id="form_popup1_County" name="text" type="text" size="35"/> 

     <label for="form_popup2_Country">Country</label> 
     <select class="countrySelect" name="select" id="form_popup1_CountryList"> 
      <option value="AF">Afghanistan</option> 
      <option value="AL">Albania</option> 
     </select> 

     <label for="form_p">Postcode</label> 
     <input class="jsOptional" id="form_popup1_PostCode" type="text" size="10" maxlength="8"/> 
     <img class="cursor submit confirmAllInputs" src="confirmBTN2.gif" id="confirmManualAddressEntry01" style="margin-bottom:-5px;"/> 
     <br/> 
    </div> 
</div> 

- しかし、私はいくつかのjQueryを書いて、ポップアップの下部にある".confirmAllInputs"ボタンをクリックすると、のない".container"のすべての入力フィールドを見つけて、それらがすべて入力されているかどうかを確認します。そうでない場合は、エラーメッセージが表示されます。それ以外の場合はすべて受け入れられます。

私はいくつか試みました。私が得た最も近いものは：

$('.confirmAllInputs').click(function(){ 
    var container = $(this).parents('.container'); 
    var optionalFields = (container.find('input[class!=jsOptional]').val()); 
    $(container).each(function(i){ 
     alert('These are the value of the fields: ' + optionalFields); 
    }); 
}); 

しかし、これは最初のフィールドの値だけを返します。私はすべてを調べ、それらが空でないことを確認する必要があります。

Answer 1

この意志クラスjsOptional、どこvalueが""ではありません.find()入力。

$('.confirmAllInputs').click(function() { 
    var missingRequired = $(this).closest('.container') 
           .find('input[class!=jsOptional][value=""]'); 
    if (missingRequired.length) { 
     alert('there were required fields that were not completed'); 
    } 
}); 

missingRequired.lengthが0よりも大きい場合、alert()が発生します。必要であれば、missingRequiredコレクションを反復処理できます。

missingRequired.each(function() { 
    alert(this.id + ' is required.'); 
}); 

または、使用できるIDの完全な文字列を作成します。

var str = missingRequired.map(function() { 
    return this.id; 
}).get().join(", "); 

alert("These are required: " + str); 

Answer 2

$('.confirmAllInputs').click(function(){ 
    var container = $(this).parents('.container'); 
    var optionalFields = (container.find('input[class!=jsOptional]').val()); 
    var szMessage = ""; 
    $(container).each(function(i){ 
     szMessage += <YOUR_MESSAGE> ; 
    } 
    alert(szMessage); 
);