我正在创建一个 HTML DIV，它具有输入、img、textarea、radio、checkbox、dropdown 等元素，这些元素动态绑定(bind)到 div。有时 DIV 可能有一个元素(输入文本)或者它可能有多个元素，这些元素来自服务器并绑定(bind)到主 DIV。 我必须在提交时验证是否添加了 DIV 元素值。 我不想在 if else block 中单独验证所有 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&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。我必须一个一个地验证它们是否添加了天气元素值 请帮助我
最佳答案
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
关于javascript - 如何验证在 Jquery 中动态添加的 div 子元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42664412/