19

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

  • 検証方法:

     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 コンソールのエラー: Uncaught TypeError: 未定義のプロパティ 'settings' を読み取れません

また、他のブラウザでもエラーが発生しています。次に、問題を理解しようとしたところ、次のことがわかりました。

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

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

これにより TypeError が発生するのはなぜですか?それを解決するにはどうすればよいですか?

4

4 に答える 4

18

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

$("form").validate()
$(yourElement).rules("add", {...})
于 2013-04-10T11:52:10.427 に答える
1

あなたのコードは必要以上に複雑だと思います。ドキュメントの準備ができたときに呼び出す必要があり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/

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

他にできることは、validateの options の 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/

于 2012-05-19T17:53:32.230 に答える
1

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

setTimeout(function() {
    $(yourElement).rules("add", {...})
}, 100);
于 2015-06-16T09:48:54.203 に答える