0

フォームを検証するためにjquery検証を使用しています。私はデザイナーの気まぐれに対応しようとしていますが、それはかなりトリッキーです。基本的に、設計者は、必須入力ごとに「必須*」の青いテキストが必要です。必須の入力が完了していない場合、青いテキストは赤いテキストに変わるはずです。つまり、色だけが変わり、テキストは同じままです。

クラス「必須」のラベルに青いテキストを入れました

<label class="mandatory">required*</label>

また、すべてのjquery検証に必要なメッセージを、上記のラベルと同じ「必須*」テキストに設定しました。計画では、青いラベルを非表示にし、検証されない場合はエラーラベルを表示します。

これが私が少し愚かなことをしていると感じるところです-エラー配置と成功で私は次のコードを実行しています：

errorPlacement: function (error, element) {
  element.siblings(".mandatory").hide();
  error.insertBefore(element.prev());
},
success: function (element) {
  element.siblings("label.errorMessage").remove();
  element.siblings(".mandatory").show();
}

ただし、フォームが送信されると、これはすべて正常に機能します。青いラベルは正常に非表示になり、エラーラベルは正しい位置に配置されます。

ユーザーがエラー入力の1つにテキストを追加すると、上記の「成功関数」が適切に実行され、エラーラベルが非表示になり、青いラベルが表示されます。

ユーザーがテキストを追加したのと同じ入力からテキストを削除すると、入力が個別に検証され、エラーラベルが表示されます。これが問題の原因です...エラー配置コードが再度実行されないようで、現在は青と赤の両方のラベルが表示されます。

入力が再度検証された時点で青いラベルを非表示にするために私ができることを誰もが知っています-ところで、フォームが再度送信されれば、すべて問題ありませんか？

乾杯

羽

4

4 に答える 4

1

私はjQuery検証をあまり使用していませんが、あなたがやろうとしていることはわかっていると思います。それを簡単にするための提案があり、あなたが抱えている問題を解決するかもしれません.2を非表示にして表示するのではなくエラーまたは成功のさまざまなラベル 1 つのラベルを使用して、検証の結果に応じて「エラー」クラスのオンとオフを切り替えないのはなぜですか? このような何かがトリックを行うかもしれません:

errorPlacement: function (error, element) {
  element.siblings(".mandatory").addClass('error');
},
success: function (element) {
  element.siblings(".mandatory").removeClass('error');
}

「必須」の css ルールにより、ラベルはデフォルトで青色になり、「エラー」クラスのスタイルを記述して、クラスが適用されたときにラベルが赤色になるようにすることができます。こうすれば、ラベルの追加と削除をいじる必要がなくなります。状態を切り替えるだけのラベルしかありません。

それが役立つことを願っています。

于 2013-02-28T16:08:36.853 に答える
1

フィールドが検証に合格したときにエラー メッセージを表示することはできないと思います。プラグインの内部には、フィールドが検証に合格したときにすべてのラベルを非表示にするコードがあります。ただし、効果をシミュレートしようとしているだけかもしれません。

これを試してみたい場合は、最終的に解決策につながる可能性のある洞察を提供します.

highlightとのunhighlightコールバックを見てください。これらの補完機能は、合否アイコンの表示などのために設計されました。

ここに、デフォルトのコードを示します。

    highlight: function (element, errorClass, validClass) {
        if (element.type === "radio") {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).addClass(errorClass).removeClass(validClass);
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        if (element.type === "radio") {
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else {
            $(element).removeClass(errorClass).addClass(validClass);
        }
    },

デフォルトのerrorPlacementコールバックは次のとおりです。

    errorPlacement: function (error, element) {
        error.insertAfter(element);
    },

コールバックにはデフォルトはsuccessありませんが、ドキュメントに従って、成功時にラベルにテキストを配置するために使用できます。

    success: function (label) {
        label.removeClass('error').addClass('valid').text('ok')
    },

errorとは & 要素のvalidデフォルトの CSSであるため、おそらく次のようにそれらの色を活用できます...classlabel

label.valid {
    color: #00f;
}

label.error {
    color: #f00;
}

テストに使用できる jsFiddle は次のとおりです: http://jsfiddle.net/7TPvP/

これは、すべてのコールバック関数とオプションに関するドキュメントです: http://docs.jquery.com/Plugins/Validation/validate#toptions

コードに関する注意事項:

引用OP:

「エラー配置コードが再度実行されないようで、現在、青と赤の両方のラベルが表示されています。」

これは、実際のlabel(エラーのプラグインによって作成された) が既に一度配置されているためです。再度配置する必要はありません。何かを継続的にオン/オフしたい場合は、highlightおよびunhighlightコールバック関数を見てください。

編集：

ここにあなたが望むものに非常に近いものがあります。まだまだ微調整が必​​要ですね…

デモ: http://jsfiddle.net/2mwfG/

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        // other options and rules,
        highlight: function (element, errorClass, validClass) {
            if (element.type === "radio") {
                this.findByName(element.name).addClass(errorClass).removeClass(validClass);
            } else {
                $(element).addClass(errorClass).removeClass(validClass);
                $(element).prev('.mandatory').hide(); // <-- added this
            }
        },
        unhighlight: function (element, errorClass, validClass) {
            if (element.type === "radio") {
                this.findByName(element.name).removeClass(errorClass).addClass(validClass);
            } else {
                $(element).removeClass(errorClass).addClass(validClass);
                $(element).prev('.mandatory').show();  // <-- added this
            }
        },
        errorPlacement: function (error, element) {
            error.insertAfter(element);
        }
    });

});
于 2013-02-28T15:50:03.847 に答える
0

おそらく、エラー メッセージを削除して DOM に挿入するのではなく、ずっとそこに置いておき、必須メッセージに対して行っているように表示または非表示にすることができますか?

したがって、それを html に含めますが、非表示にします。

<span class="errorMessage" style="display: none;">* required</span>

次に、現在のコードで表示または非表示にできます。

errorPlacement: function (error, element) {
  element.siblings(".mandatory").hide();
  element.siblings(".errorMessage")show();
},
success: function (element) {
  element.siblings(".errorMessage").hide();
  element.siblings(".mandatory").show();
}
于 2013-02-28T13:45:18.580 に答える
0

まず、あなたは errorPlacement コールバックが再び実行されないようだと言います。そうではありません。プラグインのライフサイクルでフィールドごとに 1 回だけ実行されます。つまり、errorLabel を作成してページに配置すると、その作業は完了です。

この回答で説明されているように、エラー ラベルを手動で入力できます

<label for="name" class="error" generated="true">your message here</label>

ただし、フィールドが有効な場合、プラグインはラベルの内部テキストを削除します。

これを試してみてください。エラー メッセージを data- 属性に隠しておき、存在する場合は成功のコールバックで取得しました。

<input name="one" id="one" class="required" />
<label data-message="* this is required" for="one" class="error valid"></label>

スクリプトはフィドルの下にあります 

$(function () {

    $('label[data-message]').each(function () {
        $(this).html($(this).data("message"));
    });

    $("form").validate({
        success: function (label) {
            if (label.data("message")) {
                label.addClass("valid").text(label.data("message"));
            } else {
                label.text("");
            }
        },
        submitHandler: function () {
            alert('form is ok');
        }
    });
});
于 2013-02-28T21:07:29.503 に答える