web-dev-qa-db-ja.com

JQuery.Validateによる動的ルールとメッセージの追加

Jquery.validateを使用しているフォームがあります。最初に、一連のルールとカスタムメッセージでvalidateを呼び出します...

$("#formName").validate( {
  rules: {
    myExistingInput: {
      required: true
    }
  },
  messages: {
    myExistingInput: {
      required: "Enter something"
    }
  },
  ignore: null, // include hidden fields (see below)
  submitHandler: function(form) {
    // do stuff
  },
  invalidHandler: function(event, validator) {
    // do stuff (some of the fields may have been hidden by a collapsible panel
    // if there is an error on one of those fields, expand the panel so the error
    // becomes visible)
  }
});

後で、フォームにフィールドを動的に追加し、それらのフィールドにもルールを追加します...

$("#formName").append(...);

$("#newInputName").rules("add", {
  required: true,
  messages: {
    required: "Enter something else"
  }
});

その後フォームを送信すると、jquery.validate内からエラーが発生します...

エレメントnewInputNameのチェック中に例外が発生し、「messages」メソッドをチェックしてください。TypeError：未定義またはnull参照のプロパティ「call」を取得できません

ブラウザでデバッグすると、「check」関数内からエラーがスローされ、「method」変数が「messages」に設定されていることがわかります。

Rules（ "add"、...の呼び出しからメッセージを削除した場合.

$("#newInputName").rules("add", {
  required: true
});

期待どおりに動作しますが、明らかにカスタムエラーメッセージはありません。

ここで、SOで構文が正しいことを示す多くの例を見ました。提案はありますか？

ところで：jQuery検証プラグイン-v1.11.0-2013年2月4日

jqueryjquery-mobilejquery-validate
19
Martin Robins

あなたのコードは、あなたがそれを投稿したとき、エラーなく動作しているようです。

DOM対応のデモ： http://jsfiddle.net/UZTnE/

PageInitとjQuery Mobileを使用したデモ： http://jsfiddle.net/xJ3E2/ （

$(document).on("pageinit", function () {

    $('#myform').validate({ // initialize the plugin
        rules: {
            field1: {
                required: true
            }
        },
        messages: {
            field1: {
                required: "Enter something"
            }
        }
    });

    $('[name*="field"]').each(function () {
        $(this).rules('add', {
            required: true,
            messages: {
                required: "Enter something else"
            }
        });
    });

});

[〜＃〜] html [〜＃〜]：

<form id="myform">
    <input type="text" name="field1" />
    <input type="text" name="field2" />
    <input type="submit" />
</form>

[〜＃〜] btw [〜＃〜]：

この...

ignore: null, // include hidden fields

あるべき...

ignore: [], // include hidden fields

参照： jQuery Validate-非表示フィールドの検証を有効にする

26
Sparky
$(document).ready(function(){
  $("#controlId").rules("add", {
     required : true,
     messages : { required : 'field is required.' }
  });
});
6
hardik prajapati

この古い問題への答えとして、私はルールオブジェクト内の測定を取得するためにこれを行います。

ルールを追加したら、次のようなメッセージを追加できます。

var inputRules = $('input').rules();
inputRules.messages = {required: 'your message'};

enter image description here

幸運を！

0
Eagle_one