web-dev-qa-db-ja.com

Jqueryの検証-入力要素にルールを追加するときにエラーが発生しましたか？

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

私の設計計画：

  • 私のinput要素：

    <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});
                   });

  • メソッドの検証：

     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
       });
 }

私の予想通り、フォームのプレースホルダースパンにエラーメッセージが表示されるはずです。

しかし、問題

Chromeのエラー-コンソール：キャッチされていないTypeError：未定義のプロパティ '設定'を読み取れません

他のブラウザでもエラーが発生します。それから、私は問題を理解しようとしました、そして見つけました：

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

として、私の理解とドキュメントによると->これは正しいはずです。

なぜこれがTypeErrorを引き起こすのでしょうか、そしてそれを解決するために何ができますか？

javascriptjqueryjquery-validate
18
Yugal Jindle

フォーム要素でvalidateプラグインを呼び出した後、ルールを追加する必要があります。

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

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

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

あなたのコードは必要以上に複雑だと思います。ドキュメントの準備ができたらvalidateを呼び出す必要があります（フォームがドキュメントの準備ができていると仮定します）。

$(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/

JavaScriptを介して追加する代わりに、必要な要素にrequiredのクラスを追加することもできます。

もう1つできることは、validateのオプションのrulesオブジェクトにルールを追加することです。

$(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/

1
Andrew Whitaker

犯人はメソッドdelegate（）であり、バリデーターが存在するかどうかをチェックしません。

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/

0
Chandrew