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 );
Comments
Post a Comment