Question

我正在创建一个HTML DIV，它有输入，img，textarea，radio，checkbox，dropdown等元素，这些元素动态绑定到div。有时DIV可能有一个元素（输入文本）或者它可能有多个元素，这些元素来自服务器并绑定到主DIV。我必须在提交时验证是否添加了DIV元素值。我不想在if else块中单独验证所有HTML元素。无论如何都要验证DIV子元素的增值与否？场景：有一个部分（这是主要的DIV），该部分有一些问题（这些是子DIV的子元素），每个部分有一些数字来回答问题，如学生应该回答的问题5问题所以我需要验证他已回答了多少问题。

    <!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="subSectionDiv template">
        <div class="ui-widget">
            <div class="form-group">
                <label for="Section_1_SubSection_0">1</label>
                <div class="inner-addonAutoFill right-addon">
                    <img class="autoFillIcon autoFillCls" id="autoFill_Section_1_SubSection_0" onclick="autoFillOtions(id)" src="img/autoFill.png">
                    <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
                        <input class="1_Section_1_SubSection_0_2340 form-control" id="Section_1_SubSection_0" maxlength="15" onblur="hideErrorMessage(this.id)" oninput="maxLengthCheck(this)" type="text">
                    </div>
                </div>
                <div class="subSectionDecDiv">
                    <p class="subSectionDescP">1 Desc</p>
                </div>
                <p class="validationP Section_1_SubSection_0"></p>
            </div>
        </div>
        <div class="form-group">
            <label for="Section_1_SubSection_1">2</label>
            <div class="ui-select">
                <div aria-disabled="false" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow ui-btn-active" id="Section_1_SubSection_1-button">
                    <span class="form-control mobile-selectmenu-disabled">1</span><select class="form-control" id="Section_1_SubSection_1" onchange="hideErrorMessage(this.id)">
                        <option value="1">
                            1
                        </option>
                        <option value="2">
                            2
                        </option>
                        <option value="3">
                            3
                        </option>
                        <option value="4">
                            4
                        </option>
                    </select>
                </div>
            </div>
            <div class="subSectionDecDiv">
                <p class="subSectionDescP">2 Desc</p>
            </div>
            <p class="validationP Section_1_SubSection_1"></p>
        </div>
        <div class="form-group">
            <label for="Section_1_SubSection_2">3</label>
            <div class="ui-checkbox">
                <label class="checkbox-inline ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-on" onclick="clickOnCheckboxLabel(this);">1</label><input checked="checked" id="ck_1" name="Section_1_SubSection_2" onchange="hideErrorMessage(this.name)" onclick="checkReadOnlyCheckBox(this);" type="checkbox" value="1">
            </div>
            <div class="ui-checkbox">
                <label class="checkbox-inline ui-checkbox-off ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left" onclick="clickOnCheckboxLabel(this);">2</label><input id="ck_2" name="Section_1_SubSection_2" onchange="hideErrorMessage(this.name)" onclick="checkReadOnlyCheckBox(this);" type="checkbox" value="2">
            </div>
            <div class="ui-checkbox">
                <label class="checkbox-inline ui-checkbox-off ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left" onclick="clickOnCheckboxLabel(this);">3</label><input id="ck_3" name="Section_1_SubSection_2" onchange="hideErrorMessage(this.name)" onclick="checkReadOnlyCheckBox(this);" type="checkbox" value="3">
            </div>
            <div class="ui-checkbox">
                <label class="checkbox-inline ui-checkbox-off ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left" onclick="clickOnCheckboxLabel(this);">4</label><input id="ck_4" name="Section_1_SubSection_2" onchange="hideErrorMessage(this.name)" onclick="checkReadOnlyCheckBox(this);" type="checkbox" value="4">
            </div>
            <div class="ui-checkbox">
                <label class="checkbox-inline ui-checkbox-off ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left" onclick="clickOnCheckboxLabel(this);">5</label><input id="ck_5" name="Section_1_SubSection_2" onchange="hideErrorMessage(this.name)" onclick="checkReadOnlyCheckBox(this);" type="checkbox" value="5">
            </div>
            <div class="ui-checkbox">
                <label class="checkbox-inline ui-checkbox-off ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left" onclick="clickOnCheckboxLabel(this);">6</label><input id="ck_6" name="Section_1_SubSection_2" onchange="hideErrorMessage(this.name)" onclick="checkReadOnlyCheckBox(this);" type="checkbox" value="6">
            </div>
            <div class="subSectionDecDiv">
                <p class="subSectionDescP">3 Desc</p>
            </div>
            <p class="validationP Section_1_SubSection_2"></p>
        </div>
        <div class="imgUpldDiv">
            <span class="label">4</span> <span></span>
            <div id="syncDiv">
                <span><button class="btn btn-primary ui-btn ui-shadow ui-corner-all" id="Section_1_SubSection_3" onclick="addCandidatePhoto(id);" type="button"><span><span class="glyphicon glyphicon-plus btnGlycophin" hidden="true" style="vertical-align:middle"></span> Upload Img</span><input class="imageFileName Section_1_SubSection_3" type="hidden" value="1488948216078.jpg"></button></span>
            </div><span class="imagePreview Section_1_SubSection_3"><img alt="img" class="img-responsive imgSmall" src="file:/storage/emulated/0/DCIM/Camera/1488948216078.jpg" style="margin-right:5px"><span class="glyphicon glyphicon-remove savedImageRemover Section_1_SubSection_3 1488948216078" id="Section_1_SubSection_3&amp;file:/storage/emulated/0/DCIM/Camera/1488948216078.jpg" onclick="removeSavedPhoto(id)"></span></span>
            <div class="subSectionDecDiv" style="display: block;">
                <p class="subSectionDescP">4 Desc</p>
            </div>
            <p class="validationP Section_1_SubSection_3" id="imageErrorSection_1_SubSection_3" style="display: block;"></p>
        </div>
    </div>
</body>
</html>

subSectionDiv是主要的DIV类名，有4个子div。我必须逐个验证它们是否添加了天气元素值请帮帮我

Answer 1

I have a hack for this.
Add a class (eg:form-elements) to all the inputs,selectbox,textarea and others which you want to validate and try the code below :

$('.form_elements').each(function(){
        if($(this).attr('type')=='checkbox'){
            if($(this).prop('checked')){
                //do something
            }
        }else if($(this).attr('type')=='text'){
            if($(this).val()==''){
                //do something
            }
        }else if($(this).attr('type')==undefined){
            if($(this).prop('tagName').toLowerCase()=='select'){
              if($(this).val()==''){
                //do something
              }
            }
        }
   });

you can use this code to validate all the fields in you page. The validation may vary for some tag and if you want validation for any fields kindly make a request.

Hope this is useful

如何在Jquery中验证动态添加的div子元素？

1 个答案: