jQueryツールのバリデーター、動的に追加された要素で動作させる方法

jQuery Tools Validatorを使用してフォーム検証を実装しようとしています。jQueryツールのバリデーター、動的に追加された要素で動作させる方法

私のフォームは単純ではない、それは2つのステップで構成されています

初期フィールドが提示され、バリデータが正しい値が入力され、必要なフィールドが満たされていることを確認するために初期化されます。
すべてのフィールド値が提供され、送信ボタンがクリックされたら、jsonリクエストを行い、結果に応じて、対応する検証属性を持つ新しい入力フィールドを追加し、送信アクションをキャンセルします。新しいフィールドでボタンをクリックすると、フォームが送信されます。

バリデーターは、検証するための新しい入力についてはわかりません。どのように私はそれをリフレッシュし、バリデータは動的に追加された入力を認識させるのですか？

私は

form.data("validator").destroy(); 
form.validator();

しかし、運を試してみました。

提案がありますか？

出典

2012-01-06 Paul

私は、バインド解除機能（http://api.jquery.com/unbind/）を使用してこの問題を解決したいと思います。このソリューションの良い点は、新たに追加されたフィールドを手動でバリデーターオブジェクトにアタッチする必要がないことです。あなたは*/

 { 
    "name": "Invalid name. Our apologies", 
    "age": "You are too young", 
    "valid": "true" 
}

/*サーバside.htmlファイル*/

 
 <html> 

<!-- 
    This is a jQuery Tools standalone demo. Feel free to copy/paste. 

    http://flowplayer.org/tools/demos/ 

    Do *not* reference CSS files and images from flowplayer.org when in production 

    Enjoy! 
--> 

<head> 
    <title>jQuery Tools standalone demo</title> 

    <!-- include the Tools --> 
    <script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script> 


    <!-- standalone page styling (can be removed) --> 
    <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/> 


    <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/demos/validator/css/form.css"/> 

</head> 

<body> 


<form id="myform"> 

    <fieldset> 
     <h3>Sample registration form</h3> 

     <p> Enter bad values and then press the submit button. </p> 
     <p> 
     <label>website *</label> 
     <input type="url" name="url" required="required" /> 
     </p> 
     <p> 
     <label>name *</label> 
     <input type="text" name="name" pattern="[a-zA-Z ]{5,}" maxlength="30" /> 
     </p> 
     <p> 
     <label>age</label> 
     <input type="number" name="age" size="4" min="5" max="50" /> 
     </p> 

     <p id="terms"> 
     <label>I accept the terms</label> 
     <input type="checkbox" required="required" /> 
     </p> 

     <button type="submit">Submit form</button> 
     <button type="reset">Reset</button> 
    </fieldset> 

</form> 


<script> 

// initialize validator and add a custom form submission logic 
var submitEvent = function(){$("#myform").validator().submit(function(e) { 

    var form = $(this); 

    // client-side validation OK. 
    if (!e.isDefaultPrevented()) { 

     // submit with AJAX 
     $.getJSON("server-fail.js?" + form.serialize(), function(json) { 

      // everything is ok. (server returned true) 
      if (json['valid'] === 'true') { 
       if($("#testField").length == 0){ 
        $("#terms").before('<p> <label id="testField">email *</label><input type="email" name="email" required="required" /></p>'); 
       } 
       else { 
       alert("new field validated successfully"); 
       } 

       form.unbind("submit"); 
       submitEvent(); 

      // server-side validation failed. use invalidate() to show errors 
      } else { 
       form.data("validator").invalidate(json); 
      } 
     }); 

     // prevent default form submission logic 
     e.preventDefault(); 
    } 
});}; 
submitEvent(); 
</script> 
</body> 

</html>

/*サーバfail.jsファイルCA：下記のnこのコードを試して、よりダイナミックな機能を実現してください.Enjoy :)

出典

2012-01-07 01:48:53

妥当性検証を行うには、特に私が提案した方法は動的に追加された要素に対してinvalidate（）を呼び出すことはできません。コードサンプルをありがとう！ – Paul

まあ、私は、新しい要素が既存のバリデータオブジェクトには添付されていないと考えていました。したがって、移動するための方法は、新規作成されたフィールドのためのバリデータを初期化し、フォームのコードから検証を実行するためのイベントを提出フックアップすることでした

：

var input = $("#newDiv :input").validator(); 

$("#formId").submit(function(e) 
{ 
    input.data("validator").checkValidity(); 
});

これがうまく働きました。

出典

2012-01-06 23:51:27 Paul

jQueryツールのバリデーター、動的に追加された要素で動作させる方法

答えて

関連する問題