jQuery - überprüfen, ob alle Pflichtfelder in einem Abschnitt beantwortet wurden

Question

Ich muss eine Überprüfung auf ein Leuchtkasten PopUp ausführen, um zu sehen, ob alle Felder, die nicht optional sind, eingegeben wurden.

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> 

Was muss ich tun ich den langen Weg rund gehen und prüfen Sie jedes Eingabefeld von id und replizieren diese, ids für jeden Pop-up in diesem Format zu ändern - aber ich möchte einige jQuery schreiben, dass, wenn die Schaltfläche ".confirmAllInputs" am unteren Rand des Popup angeklickt wird, findet es alle Eingabefelder innerhalb dieser ".container", die nicht die Klasse jsOptional haben, und prüfen, ob diese alle eingegeben worden sind. Wenn nicht, sollte eine Fehlermeldung angezeigt werden, andernfalls wird alles akzeptiert.

Ich habe ein paar Dinge versucht. Der nächste, den ich bekam, war:

$('.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); 
    }); 
}); 

Aber dies meldet nur die ersten Felder Wert zurück. Ich muss alles durchgehen und prüfen, ob sie nicht leer sind.

Answer 1

Dies wird .find() Eingänge, die die Klasse haben nicht jsOptional und wo die value ist "".

$('.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'); 
    } 
}); 

Wenn missingRequired.length größer als 0 ist, wird die alert() abzufeuern. Sie können bei Bedarf über die missingRequired Sammlung iterieren.

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

Oder erstellen Sie eine vollständige Zeichenfolge der IDs, die Sie verwenden können.

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); 
);