jQuery - проверить, все ли обязательные поля в разделе заполнены.

Question

Мне нужно запустить проверку во всплывающем окне лайтбокса, чтобы увидеть, были ли введены все поля, которые не являются необязательными.

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>

Что мне нужно сделать Я мог бы пройти длинный путь и проверить каждое поле ввода по идентификатору и скопировать его, меняя идентификаторы для каждого всплывающего окна в этом формате - но я хочу написать некоторый jQuery, когда * 1010Нажата кнопка * внизу всплывающего окна, она находит все поля ввода в этом ".container", которые не имеют класса jsOptional, и проверяет, все ли они были введены.Если нет, то должно отображаться сообщение об ошибке, в противном случае все это принимается.

Я попытался сделать несколько вещей.Самое близкое, что я получил, было:

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