0

現在、生成されたフィールドのいずれかが空白の場合にカスタム エラー メッセージを表示するフォームの領域を生成しています。

生成されたコードは次のようになります

<input type="text" id="Field1" name="Generated" />
<input type="text" id="Field2" name="Generated" />

等...

そして、私の検証コードはそうです

$('#myform').validate({
    rules: {
        Generated: {
            required:true
        }
    },
    messages: {
        Generated: { required : "Custom message." }
    },
    groups: {
        GeneratedGroup: "Generated"
    },
    errorPlacement: function(error, element){
        if (element.attr("name") == "Generated"){
            $('#bottomOfGeneratedSectionDiv').append(error);
        } else {
            error.insertAfter(element);
        }
    }
});

生成されたすべてのフィールドが空白の場合、検証は失敗し、エラー メッセージが表示されます。
いずれかのフィールドに入力すると、検証に合格してフォームが送信されますが、これは意図しない動作です。

動的フィールドをグループ化して検証するにはどうすればよいですか?

編集
with sparkies ヘルプと私の新しい errorPlacement コード。
これで私の目標は達成されるはずです。

    errorPlacement: function(error, element){
        if (element.attr("name").indexOf("Generated") >= 0){
            $('#bottomOfGeneratedSectionDiv').empty();
            $('#bottomOfGeneratedSectionDiv').append(error);
        } else {
            error.insertAfter(element);
        }
    }
4

1 に答える 1

2

このプラグインが正しく機能するには、フィールド名が一意である必要があります。

HTML :

<input type="text" id="Field1" name="Generated1" />
<input type="text" id="Field2" name="Generated2" />

jQuery :

$(document).ready(function() {

    $('#myform').validate({
        rules: {
            Generated1: {
                required:true
            },
            Generated2: {
                required:true
            }
        },
        messages: {
            Generated1: { 
                 required: "Custom message."
            },
            Generated2: { 
                 required: "Custom message."
            }
        },
        groups: {
            GeneratedGroup: "Generated1 Generated2"
        }
    });

});

デモ: http://jsfiddle.net/xCY4T/

動的に追加されたフィールドにルールを追加するには、フィールドが作成された直後にメソッドを使用します。rules('add')groups（私の知る限り、オプションを動的に追加する方法はありません）

$('[name="Generated2"]').rules('add', {
    required:true,
    messages: {
        required: "Custom message."
    }
});

または、一度に多くの新しいフィールドを作成するには、「で始まる」セレクターを使用して.each...

$('[name^="Generated"]').each(function() {
    $(this).rules('add', {
        required:true,
        messages: {
            required: "Custom message."
        }
    });
});

この方法の簡単なデモ: http://jsfiddle.net/xCY4T/1/

もう 1 つの方法は、addClassRules メソッドを使用して を作成することです。 class

$.validator.addClassRules("GeneratedRule", {
    required: true
});

次に、新しいフィールドを作成するときは、もちろん、それぞれにclass="GeneratedRule"一意のが含まれていることを確認してnameください。

<input type="text" name="Generated1" class="GeneratedRule" />
<input type="text" name="Generated2" class="GeneratedRule" />

この方法は非常に簡単ですが、デフォルトのメッセージを上書きする方法がわかりません。

簡単なデモ: http://jsfiddle.net/xCY4T/2/

于 2013-04-02T14:47:50.477 に答える