Jqueryの検証 - 入力要素にルールを追加する際のエラー？

Question

私はhttp://docs.jquery.com/Plugins/ValidationでjQueryの検証を実装しようとしています：

私の設計計画：

• マイ入力要素：

  <form action="submit.php" id="form_id"> 
      <input type="text" class="val-req" id="my_input" name="myval" /> 
      <input type="button" onclick="validate_form('form_id', function() { $('#form_id').submit(); })" /> 
      <span id="val-msg" class="my_input"></span> 
  </form> 
  

• その後、DOM準備に：

  $(document).ready(function() { 
           $('.val-req').rules('add', {required:true}); 
          }); 
  

• Validateメソッド：私の期待を1として

  function validate_form(form_id, callback) { 
       var form = $('#'+form_id); 
       $('.val-req').each(function() {$(this).rules('add', {required:true});}); 
       $(form).validate({ 
         errorElement: "span", 
         errorClass: "val-error", 
         validClass: "val-valid", 
         errorPlacement: function(error, element) { 
               $('#val-msg.'+$(element).attr('id')).innerHTML(error.html()); 
             }, 
         submitHandler: callback 
       }); 
  } 
  

、それは形式のプレースホルダスパンでエラーメッセージが表示されるはずです。

しかし、それはまた他のブラウザにエラーを与えている問題

Error on Chrome-Console: Uncaught TypeError: Cannot read property 'settings' of undefined

。 はその後、私は理解アウトする問題をしようとしたが見つかりました：私の理解とドキュメントあたり

$('.val-req').rules('add', {required:true}); # This is causing the error 

として、 - >これは正しいはずです。

これが原因でTypeErrorが発生する原因とその解決方法を教えてください。

Answer 1

あなたのコードは、必要以上に複雑だと思います。

$(document).ready(function() { 
    $(".val-req").addClass("required"); 
    $("#form_id").validate({ 
     errorElement: "span", 
     errorClass: "val-error", 
     validClass: "val-valid", 
     errorPlacement: function(error, element) { 
      $('#val-msg.' + $(element).attr('id')).html(error.html()); 
     }, 
     submitHandler: function() { 
      this.submit(); 
     } 
    }); 
});​ 

例：http://jsfiddle.net/4vDGM/

をあなたはまた、単に必要な要素の代わりにrequiredのクラスを追加することができますあなたは（あなたのフォームは、文書準備に存在すると仮定）ドキュメント準備にvalidateをコールする必要がありますそれらをJavaScript経由で追加します。

あなたができるもう一つは、validateのオプションのルールオブジェクトにルールを追加します：

$(document).ready(function() { 
    $("#form_id").validate({ 
     rules: { 
      myval: "required" 
     }, 
     errorElement: "span", 
     errorClass: "val-error", 
     validClass: "val-valid", 
     errorPlacement: function(error, element) { 
      $('#val-msg.' + $(element).attr('id')).html(error.html()); 
     }, 
     submitHandler: function() { 
      this.submit(); 
     } 
    }); 
});​ 

例：あなたは検証プラグインを呼び出した後、ルールを追加する必要がhttp://jsfiddle.net/GsXnJ/

Answer 2

フォームの要素内：

$("form").validate() 
$(yourElement).rules("add", {...}) 

Answer 3

原因は、delegate（）、wバリデータが存在するかどうかをチェックしません：

function delegate(event) { 
    var validator = $.data(this[0].form, "validator"), 
    eventType = "on" + event.type.replace(/^validate/, ""); 
    // this fixes handling the deleted validator: 
    if (!validator) return; 
    validator.settings[eventType] && validator.settings[eventType].call(validator, this[0], event); 
} 

解決策を探していましたが、それはブログの投稿で見つかりました。

出典：http://devio.wordpress.com/2012/07/18/fixing-jquery-validation-with-changing-validators/

Answer 4

私はすでに検証が設定されていたフォーム上のルールを変更しようとしていたが、私は私の$（ドキュメント）.ready（...）のコードは、メインの前に実行していたましたフォームの検証が設定されたので、短いsetTimeoutを追加すると、この問題が解決されました。

setTimeout(function() { 
    $(yourElement).rules("add", {...}) 
}, 100);