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

i need run check on lightbox popup see if fields not optional have been input.

html

<div id="manualaddressentry01" class="container popup large hidden shadow02 rounded03">     <div class="popupheading">         <h4>please enter 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 need do go long way round , check each input field id, , replicate this, changing id's each pop in format - want write jquery when ".confirmallinputs" button @ bottom of pop clicked, finds input fields within ".container" not have class jsoptional, , check if these have been input. if not, error message should displayed, otherwise, it's accepted.

i've attempted few things. closest got :

$('.confirmallinputs').click(function(){     var container = $(this).parents('.container');     var optionalfields = (container.find('input[class!=jsoptional]').val());     $(container).each(function(i){        alert('these value of fields: ' + optionalfields);     }); }); 

but reports first fields value. need cycle through , check not empty.

this .find() inputs not have class jsoptional , value "".

$('.confirmallinputs').click(function() {     var missingrequired = $(this).closest('.container')                                  .find('input[class!=jsoptional][value=""]');     if (missingrequired.length) {         alert('there required fields not completed');     } }); 

if missingrequired.length greater 0, alert() fire. can iterate on missingrequired collection if needed.

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

or create complete string of ids can use.

var str = missingrequired.map( function() {     return this.id; }).get().join(", ");  alert( "these required: " + str );