ショーのdiv控えめな検証はMVC 3

Question

に有効、無効だった場合、それを隠している場合は、これは私の編集ビューの一部です：

<dt> 
@Html.LabelFor(model => model.MainModel.StartDate) 
</dt> 
<dd> 
@Html.TextBoxFor(model => model.MainModel.StartDate) 
@Html.ValidationMessageFor(model => model.MainModel.StartDate) 
    <div class="targetDiv"> My content </div> 
</dd> 

だからすべてが知っているとき、私のモデルで有効ではありません控えめなショーでStartDateフィールドエラーメッセージと有効な場合はそれを非表示にします。今、このプロセスに別のアクションを追加したいと思います。 StartDateの値が無効な場合は、"targetDiv" divと表示され、StartDateの値が有効な場合は非表示になります。あなたの提案は何ですか？あなたは（それがあるmyFormのIDを持っているし、次のコードは、保存ボタンのクリック機能内にラップされたと仮定して）最初のフォームを検証する必要があります

Answer 1

：

$("#myForm").validate(); 

if ($("#myForm").valid()) { 
    $("#targetDiv").css("display", "none"); 
} 
else { 
    if ($("[id='MainModel.StartDate']").hasClass("input-validation-error") { 
     //note the strange ID selector above, that's because it's got a . in :) 
     $("#targetDiv").css("display", "block"); 
    } 
    else { 
     $("#targetDiv").css("display", "none"); 
    } 
} 

Answer 2

控えめな検証があなたにCSSクラスを追加しますこれは検証メッセージを表示するかどうかを決定する方法です。ここに検定があります：

<div class="editor-label"> 
      <label>Start date</label> 
      <input class="text-box single-line" data-val="true" data-val-required="Must not be Empty" id="StartDate" name="StartDate" type="text" value=""> 
      <span class="field-validation-valid" data-valmsg-for="StartDate" data-valmsg-replace="true"></span> 
</div> 

<div class="targetDiv">Your div shown only if StartDate is invalid</div> 

これはあなたのhtmlがソースでどのように見えるかを示しています。あなたは開始日の入力に無効なデータを書き込む後は、クラスがあなたの入力と、span要素に追加わずかに異なる通知を見ていきます：

<div class="editor-label"> 
    <label>Start date</label> 
    <input class="text-box single-line input-validation-error" data-val="true" data-val-required="Must not be Empty" id="StartDate" name="StartDate" type="text" value=""> 

    <span class="field-validation-error ui-state-error-icon ui-icon-alert" data-valmsg-for="StartDate" data-valmsg-replace="true"></span> 
</div> 

をspan要素は、フィールド検証エラークラスを持っているかどうかを確認することができますtargetDivを表示してください。 私はどのように控えめな検証作業を模倣し、作業サンプル提供：あなただけを使用する必要があり、現実世界の例では

$(function(){ 
    $('.targetDiv').hide(); //hide your div 
    $('#StartDate').change(function() { //capture change event for your input StartDate 
      $(this).addClass('input-validation-error'); //add unobtrusive css class for not valid 
      $(this).next().removeClass('field-validation-valid').addClass('field-validation-error ui-state-error-icon ui-icon-alert'); //add unobtrusive css class for not valid on span     
     if($(this).next().hasClass('field-validation-error')) //check if span has a error class on it 
     { 
      $('.targetDiv').show();  //show your div  
     } 
    }); 
});​ 

を：

$('#StartDate').change(function() {    
     if($(this).next().hasClass('field-validation-error')) 
     { 
      $('.targetDiv').show();   
     } 
    }); 

はここjsFiddleです：http://jsfiddle.net/mgrcic/Zj6zS/

よろしくお願いいたします。

Answer 3

あなたが持つフィールドの妥当性を確認することができModelState.IsValidField method

<div class="targetDiv" @if (Html.ViewData.ModelState.IsValidField("StartDate")) 
{ 
    <text>style="display:none"</text>   
}> 
    My content 
</div>