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

Question

I am creating one HTML DIV, it has elements like input, img, textarea, radio, checkbox, dropdown etc these elements are dynamically binding to the div. 我正在创建一个HTML DIV，它具有诸如input，img，textarea，radio，checkbox，dropdown等元素，这些元素动态绑定到div。 Sometime DIV may have one element(input text) or it may have multiple elements, those elements are coming from server and binding to the main DIV. 有时DIV可能有一个元素（输入文本），也可能有多个元素，这些元素来自服务器并绑定到主DIV。 I have to validate the that DIV elements values are added or not while submitting. 我必须验证在提交时是否添加了DIV元素值。 I don't want to validate individually in if else block for all the HTML elements. 我不想在if else块中单独验证所有HTML元素。 Is there anyway to validate DIV child elements value added or not ? 无论如何，是否可以验证DIV子元素的附加值？ Scenario : There is a one section(This is main DIV), that section there are some some questions ( These are sub DIV's like child elements), each section has some round of number to answer the questions like student should answer 5 out of 10 questions so I need to validate how many questions he has answered. 场景：有一个部分（这是主要的DIV），该部分有一些问题（这些是子DIV的子元素），每个部分都有一些回合的数字来回答问题，例如学生应在10中回答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 is the main DIV classname and 4 child divs are there.. I have to validate them one by one weather element value is added or not Please help me 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 个解决方案

解决方案1
0 2017-03-08 11:00:34

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

问题描述

1 个解决方案

解决方案1 0 2017-03-08 11:00:34

解决方案1
0 2017-03-08 11:00:34