.NET MVCプロジェクト内でjQueryの邪魔にならない検証を使用しているとうまくいきます。私は今、フィールドが正しく(クライアント側および/またはリモート)検証されたときに緑のチェックマークを表示しようとしています。ここで.NET MVC 3での邪魔にならない検証 - 成功を示すcheckmark
は、サンプルのフィールド宣言:私が何をしたいのですがどのような
<div class="clearfix">
@Html.LabelFor(model => model.Address1, "Street")
<div class="input">
@Html.TextBoxFor(model => model.Address1, new { @class = "xlarge", @maxlength = "100", @placeholder = "e.g. 123 Main St" })
<span class="help-message">
@Html.ValidationMessageFor(model => model.Address1)
<span class="isaok">Looks great.</span>
</span>
<span class="help-block">Enter the street.</span>
</div>
</div>
今度は背景画像のチェックマークが付いている「span.isaok」と「アクティブ」クラスを追加しています。
Iは、ハイライト/ハイライトを消しを使用してみました:
$.validator.setDefaults({
onkeyup: false,
highlight: function (element, errorClass, validClass) {
$(element).addClass(errorClass).removeClass(validClass);
$(element.form).find("label[for=" + element.id + "]").addClass("error");
$(element).parent().find("span.isaok").removeClass("active");
},
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass(errorClass).addClass(validClass);
$(element.form).find("label[for=" + element.id + "]").removeClass("error");
if ($(element).val().length > 0) {
$(element).parent().find("span.isaok").addClass("active");
}
}
})。
しかし、空欄の場合でも、すべてのフィールドに緑のチェックマークが表示されます。 (それゆえ明らかに間違っている)
私は 'success'オプションを使ってみましたが、決して解雇されないようです。
私には何が欠けていますか?
編集:だから私はthis blog postを発見し、
$(function() {
var settings = $.data($('form')[0], 'validator').settings;
settings.onkeyup = false;
settings.onfocusout = function (element) { $(element).valid(); };
var oldErrorFunction = settings.errorPlacement;
var oldSuccessFunction = settings.success;
settings.errorPlacement = function (error, inputElement) {
inputElement.parent().find("span.isaok").removeClass("active");
oldErrorFunction(error, inputElement);
};
settings.success = function (label) {
var elementId = '#' + label.attr("for");
$(elementId).parent().find("span.isaok").addClass("active");
oldSuccessFunction(label);
};
});
すなわち成功機能を活用することができましたが、フォームが有効でない場合は、今では、エラーメッセージが表示され、有効なマークの両方を示しています。.. 。
後者は、すぐに私はページ上の任意の場所をクリックすると消えます。いずれかが同様の問題がある場合は
+1 Old Postのようなクラスのための適切な標準CSSがあることを確認する必要がありますが、これはまだそうであるようです。私はminとその作業に切り替えました。なぜか言わない。 – Botonomous