показать 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 действительно, скройте его. Каково ваше предложение?

Answer 1

Вы должны сначала проверить вашу форму (при условии, что есть идентификатор 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"); 
    } 
} 

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 будет выглядеть в источнике. После того, как вы пишете неверные данные на входе 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> 

Вы можете проверить, если оболочка элемент имеет полевой проверки ошибок класс и покажите 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>