JQuery - check if all required fields in a section have been specified

Question

I need to run a popbox popbox check to see if all fields that are optional are entered.

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 a long way and check each input field by id and replicate it by changing the identifier for each popup in this format - but I want to write some jQuery which, when the button is ".confirmAllInputs"at the bottom of the popup, it finds all the fields input inside ".container"that don't have a class jsOptionaland check if they are all entered. Otherwise, an error message should be displayed, otherwise everything will be accepted.

I have made several attempts. The closest I got:

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

.find(), jsOptional value - "".

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

, .

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