4

これは私の編集ビューの一部です:

<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値が有効な場合は非表示にする必要があります。あなたの提案は何ですか？

4

3 に答える 3

8

ModelState.IsValidField メソッドでフィールドの有効性を確認できます

<div class="targetDiv" @if (Html.ViewData.ModelState.IsValidField("StartDate"))
{
     <text>style="display:none"</text>         
}>
     My content 
</div>
于 2012-04-22T12:26:41.693 に答える
4

最初にフォームを検証する必要があります (フォームの ID が myForm で、次のコードが保存ボタンのクリック関数内にラップされていると仮定します)。

$("#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");
    }
}
于 2012-04-22T12:25:06.960 に答える
1

目立たない検証では、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 がソースでどのように見えるかです。StartDate 入力に無効なデータを書き込むと、入力とスパン要素にクラスが追加されていることに注意してください。

<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 要素にfield-validation-errorクラスがあるかどうかを確認し、 targetDivを表示できます。目立たない検証がどのように機能するかを模倣し、動作サンプルを提供しました。

</p> 

$(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/

よろしく。

于 2012-04-22T12:26:04.143 に答える