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

【问题标题】：How to validate dynamically added div child elements in Jquery?如何验证在 Jquery 中动态添加的 div 子元素？
【发布时间】：2017-07-28 14:41:49
【问题描述】：

我正在创建一个 HTML DIV，它具有 input、img、textarea、radio、checkbox、dropdown 等元素，这些元素动态绑定到 div。有时 DIV 可能有一个元素（输入文本）或者它可能有多个元素，这些元素来自服务器并绑定到主 DIV。我必须在提交时验证是否添加了 DIV 元素值。我不想在 if else 块中单独验证所有 HTML 元素。无论如何要验证 DIV 子元素的增值与否？场景：有一个部分（这是主 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 是主 DIV 类名，并且有 4 个子 div。我必须一一验证它们是否添加了天气元素值请帮帮我

【问题讨论】：

创建一个表单验证，有一些在 jquery 一个 ex formvalidator.net
在ajax中做，当你点击提交按钮时需要调用一个包含验证所有字段（动态元素）的函数
创建一个表单，对于所有类型的元素，您可以使用 HTML5 的可选输入验证，或者使用正则表达式。对于其余的非元素，使用 jQuery 来验证 DOM 中发生的一切是否正常。
不仅是输入元素..它可能有img标签，下拉菜单，复选框等。请检查上面的div，这样会清楚地理解，我也不想使用Form，因为所有的html都已经实现了现在不能改变
" 对于其余的非元素，使用 jQuery 来验证 DOM 中发生的一切是否正常"

标签： javascript jquery html css validation

【解决方案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

【讨论】：