[英]how to validate dynamically generated form containing bootstrap tabs in jquery
在我的項目中,我使用jquery動態生成一個html表單。 這里的頁面包含五個選項卡,每個選項卡都有單獨的上一個和下一個 該選項卡使用bootstrap設計。 任何人都可以建議最簡單的方法來驗證此頁面。 即,當我單擊第一個選項卡上的下一個按鈕時,它應僅在第一個選項卡中驗證字段,依此類推。 請幫我解決這個問題。 提前謝謝了。
這是我的整個代碼:
HTML代碼:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#name" id="id-name">name</a></li>
<li><a data-toggle="tab" href="#address" id="id-address">address</a></li>
</ul>
<form class="form-horizontal" id="id-fn-employee" method="POST" enctype="multipart/form-data" action="${pageContext.request.contextPath}/employee/saveMe">
<div class="tab-content">
<div id="name" class="tab-pane fade in active" style="height:auto;overflow: hidden;">
<span id ="name1"></span>
<div class="form-group">
<label class="col-sm-3 control-label">First Name<a style="color: red">*</a>
<p style="font-size: 75%;" class="help-block">First Name</p>
</label>
<div class="col-xs-4">
<input type="text" placeholder="First Name" required="true" id="id-firstNmae" name="firstNmae" class="form-control">
<p style="font-size: 75%;" class="help-block"></p>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Last Name<a style="color: red">*</a>
<p style="font-size: 75%;" class="help-block">Last Name</p>
</label>
<div class="col-xs-4">
<input type="text" placeholder="Last Name" required="true" id="id-lastName" name="lastName" class="form-control">
<p style="font-size: 75%;" class="help-block"></p>
</div>
</div>
<ul class="pager">
<li><a href="javascript:void(0);" id="id-cancel">Cancel</a></li>
<li><a href="javascript:showTab('address');" id="id-name-next">Next</a></li>
</ul>
</div>
<div id="address" class="tab-pane fade" style="height:auto;overflow: hidden;">
<span id ="address1"></span>
<div class="form-group">
<label class="col-sm-3 control-label">house name<a style="color: red">*</a>
<p style="font-size: 75%;" class="help-block">house name</p>
</label>
<div class="col-xs-4">
<input type="text" placeholder="house name" required="true" id="id-houseName" name="houseName" class="form-control">
<p style="font-size: 75%;" class="help-block"></p>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Street<a style="color: red">*</a>
<p style="font-size: 75%;" class="help-block">Street</p>
</label>
<div class="col-xs-4">
<input type="text" placeholder="Street" required="true" id="id-street" name="street" class="form-control">
<p style="font-size: 75%;" class="help-block"></p>
</div>
</div>
<ul class="pager">
<li><a href="javascript:showPrevTab('name');" id="id-address-prev">Previous</a></li>
<li><a href="javascript:showTab('age');" id="id-age-next">Next</a></li>
</ul>
</div>
</div>
</form>
JS:
$(document).ready(function(){
var $validator = $("#id-fn-employee").validate({
errorPlacement: function (error, element) {
var placement = $(element).data('error');
if( $(element).hasClass('grp') ){
error.insertAfter($(element).parent());
}else{
if (placement) {
$(placement).append(error)
} else {
error.insertAfter(element);
}
}
}
});
});
我已經包含了所需的js文件
<script src="${pageContext.request.contextPath}/resources/js/plugins/jquery.validate.min.js"></script>
這里我們需要在js中添加上面的代碼,並且需要指定表單的id。 此驗證在靜態頁面中正常工作,但無法驗證動態生成的表單。
為簡單起見,我們假設您有一些類似下面的標記:
<ul class="tabs">
<li class="tab" id="first_tab">
<form>
/* form fields are here */
<button class="next_btn">Next</button>
</form>
</li>
</ul>
因此,您可以在“ 下一步”按鈕上收聽click
事件:
$('form .next_btn').on('click', function () {
var $btn = $(this),
$form = $btn.closest('form');
initValidator($form);
if($form.valid()){
// Go to next step
} else {
alert('Invalid form')
}
});
function initValidator($form) {
var $validator = $form.validate({
errorPlacement: function (error, element) {
var placement = $(element).data('error');
if( $(element).hasClass('grp') ){
error.insertAfter($(element).parent());
}else{
if (placement) {
$(placement).append(error)
} else {
error.insertAfter(element);
}
}
}
});
}
問題:這看起來很混亂,這就是你目前的結構。
<form class="form-horizontal" id="id-fn-employee" method="POST" enctype="multipart/form-data" action="${pageContext.request.contextPath}/employee/saveMe">
<div class="tab-content">
<div id="name">...</div>
<div id="address">...</div>
</div>
</form>
和你的腳本
var $validator = $("#id-fn-employee").validate({...
由於您將form
作為父級包裝選項卡內容,因此在任何給定的選項卡中,您最終將驗證整個表單。
解:
1)每個選項卡都有一個單獨的表單,單擊下一個按鈕,您只能驗證相應選項卡的表單。 所以你的Html應該以這種方式重組。
<div class="tab-content">
<div id="name"><form>...</form></div>
<div id="address"><form>...</form></div>
</div>
當兩個表單都有效時,您可以組合兩個表單的數據,然后使用Jquery提交。
2)如果您不想重構HTML,則必須手動僅抓取該特定選項卡內容div中的元素,然后手動驗證它們。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.