3

2 つの入力フィールドをグループ化して、無効な入力フィールドの数に関係なく 1 つのエラー メッセージのみを表示するようにしました。

両方を空のままにしてフォームを送信しようとすると、問題が発生します。どちらか一方に何かを入力するとすぐに、エラー メッセージが消えます。空の入力フィールドを選択して選択解除すると、再び表示されます。

私が望むのは、1 つ以上の入力フィールドが無効である限り、エラー メッセージが表示されるようにすることです。また、2 つの空の入力フィールドのいずれかが入力されたときにエラー メッセージが消えないようにします。

これが私のコードです：

HTML

<form>
    <div>
        <label for="fname">First Name</label>
        <input name="fname" id="fname" class="required">
    </div>
    <div>
        <label for="lname">Last Name</label>
        <input name="lname" id="lname" class="required">
    </div>
    <input type="submit" />
</form>

Javascript

$("form").validate({
    groups: {
        name: 'fname lname'
    },

    errorPlacement: function (error, element) {
        if (element.attr('name') == 'fname' || element.attr('name') == 'lname')
            error.insertAfter('#lname');
    }
});

そしてJSFiddle。

ありがとう！

4

1 に答える 1

6

引用OP:

「両方を空のままにしてフォームを送信しようとすると、問題が発生します。どちらか一方に何かを入力するとすぐに、エラー メッセージが消えます。空の入力フィールドを選択して選択解除すると、再び表示されます。」

はい、両方のエラー メッセージを 1 つにまとめました。そのため、アクティブなフィールドの条件が満たされるとすぐに、メッセージはクリアされます。フィールド＃1の条件に正確に従う必要がある一方で、フィールド＃2の条件にも準拠させることはできません...一度に1つずつ処理するだけです。

引用OP:

「私が望むのは、1 つ以上の入力フィールドが無効である限り、エラー メッセージが表示されるようにすることです。また、2 つの空の入力フィールドの 1 つが入力されたときにエラー メッセージが消えないようにします。」

オプションを使用している限り、groups設計どおりに機能します。

このgroupsオプションは、次のような特定のメソッド用に特別に設計されてrequire_from_groupいます。要素のグループから 1 つの要素を入力する場合、すべての要素で同じメッセージが繰り返されるのを確認する必要はありません。では、このgroupsフィールド グループに対して 1 つのメッセージを使用できます。(これは、単一のメッセージが単一の条件に対応する場所ですが、単一のメッセージを複数の条件に適合させようとしています。)

showErrorsおそらく、代わりに関数を使用したいと思うでしょう。

このようなもの（適宜調整してください）：

$("form").validate({
    showErrors: function (errorMap, errorList) {
        $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors:");
        this.defaultShowErrors();
    },
    errorPlacement: function () {
        return false; // <- kill default error labels
    }
});

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

そして、元のように動作するように調整された別のバージョン:

$("form").validate({
    showErrors: function (errorMap, errorList) {
        $("#summary").html("field is required");
        if (this.numberOfInvalids() > 0) {
            $("#summary").show();
        } else {
            $("#summary").hide();
        }
    },
    errorPlacement: function () {
        return false; // <- kill default error labels
    }
});

デモ: http://jsfiddle.net/wdDtR/3/

于 2013-10-17T21:00:31.497 に答える