jQuery - check if all mandatory fields in a section have been answered

Question

I need to run a check on a lightbox popUp to see if all fields that are not optional have been input.

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>

What I need to do I could go the long way round and check each input field by id, and replicate this, changing id's for each pop up in this format - but I want to write some jQuery that when the ".confirmAllInputs" button at the bottom of the pop up is clicked, it finds all input fields within that ".container" that do not have the class jsOptional, and check if these have all been input. If not, an error message should be displayed, otherwise, it's all accepted.

I've attempted a few things. The closest I got was :

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

But this only reports back the first fields value. I need to cycle through all and check they are not empty.

Answer 1

This will .find() inputs that do not have the class jsOptional and where the value is "".

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

If missingRequired.length is greater than 0, the alert() will fire. You can iterate over the missingRequired collection if needed.

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

Or create a complete String of the IDs that you can use.

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