2011-09-21 11 views
8

.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); 
    }; 
}); 

すなわち成功機能を活用することができましたが、フォームが有効でない場合は、今では、エラーメッセージが表示され、有効なマークの両方を示しています。.. 。

On submit

後者は、すぐに私はページ上の任意の場所をクリックすると消えます。いずれかが同様の問題がある場合は

On clicking on the page

答えて

1

は、私は最終的にjquery.validate.unobtrusive.jsの非縮小さバージョンを使用してのonErrorとするonSuccessメソッドに私のJSを追加することで、この作業を得ました。既存のコードはそのまま残っていました。展開時に再圧縮されたバージョンを使用します。

ありがとうございました。

+0

+1 Old Postのようなクラスのための適切な標準CSSがあることを確認する必要がありますが、これはまだそうであるようです。私はminとその作業に切り替えました。なぜか言わない。 – Botonomous

2

これは、後で$.validator.setDefaultに追加された設定を妨げるjquery.validate.unobtrusiveの問題であるようです。そのトリックは、のカスタム設定のあとに目立たないスクリプトをロードすることです。 hereを参照し、それを修正する投票をhereにしてください。

0

これはあなたの質問に対する直接の回答ではありません。私はこれに代わる方法を提供するつもりです:TwitterBootstrapMVC。このライブラリでは

あなたは、各入力のために書く必要があるだろう、すべては次のとおりです。

@Html.Bootstrap().ControlGroup().TextBoxFor(m => m.Address1) 

そして、それはそれです。あなたは、ラベル、入力、および検証メッセージを持っています - すべての世話をし、javascriptなし。それはあなたのために適切なhtmlマークを生成します。あなたは、.field-validation-error.field-validation-valid ...

関連する問題