2

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 に検証する方法は?

4

2 に答える 2

1

新しいタブを追加するときは、新しいコンテンツを検証するルールを手動で追加する必要があります。最も簡単な方法は、おそらく検証プラグインのrulesメソッドを使用することです。

関数の最後で、次のaddTabようにします。

$('#'+id).find('input').rules('add',{
    required: true
});
于 2012-11-01T15:11:48.733 に答える
0

live または on メソッドを使用しない場合、問題は jquery が dom の更新を認識しない可能性があります

次のような「オン」クリックメソッドに検証メソッドを配置してみてください

$("#Form").on ('click',handler)

ローレンスが提案したように答えを受け入れてください

このように置く

$("#Form").on("click", function(event){
      $(this).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();
           }

    });
});
于 2012-11-01T03:49:55.687 に答える