jquery validate が動的コンテンツで機能しない
jquery を使用して、新しいコンテンツを含むタブを作成します。
var tabCounter = 2,
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon- close'>Remove Tab</span></li>";
var tabs = $( "#tabs" ).tabs();
var tabContentHtml = $("#tabs-1").html();
ボタンをクリックしたときに新しいタブを追加する
$("#add_tab").click(function(){
addTab();
});
function addTab() {
var label = "Tab " + tabCounter,
id = "tabs-" + tabCounter,
li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) );
tabs.find( ".ui-tabs-nav" ).append( li );
tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
tabs.tabs( "refresh" );
tabCounter++;
}
フォームをタブに検証します。tabs-1 では動作しますが、tabs-2 では動作しません
$("#Form").validate({
rules:{
name: "required",
messages:{
name: "Please enter your name"
},
errorElement: "div",
wrapper: "div",
errorPlacement: function(error, element) {
offset = element.offset();
error.insertBefore(element)
error.addClass('message'); // add a class to the wrapper
error.css('position', 'absolute');
error.css('left', offset.left + element.outerWidth());
},
submitHandler: function(form) {
form.submit();
}
});
コード HTML
<form id="Form" method="post" action="">
<div id="tabs">
<ul>
<li>
<a href="#tabs-1">Visa 1</a>
<!-- <span class="ui-icon ui-icon-close">Remove Tab</span> -->
</li>
</ul>
<div id="tabs-1">
<table class="content-tabs">
<tr class="fieldgroup">
<td>Full Name</td>
<td><input type="text" class="txtName" name="name"></td>
</tr>
<tr></td colspan="2"><input type="submit" value="submit" /></td></tr>
</table>
</div>
</div>
</form>
コンテンツを tab-2 に検証する方法は?