Question

我需要检查灯箱popUp以查看是否已输入所有非可选字段。

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>

我需要做什么 我可以走很长的路，通过id检查每个输入字段，然后复制它，以这种格式更改每个弹出窗口的id - 但我想写一些jQuery，当底部的".confirmAllInputs"按钮时单击弹出窗口，它会查找".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.' );
});

或者创建一个可以使用的ID的完整字符串。

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

jQuery - 检查是否已回答部分中的所有必填字段

2 个答案: