如果不显眼的validation无效则显示div，如果在MVC 3中有效则隐藏它

这是我的编辑视图的一部分：

 @Html.LabelFor(model => model.MainModel.StartDate) 
 
 @Html.TextBoxFor(model => model.MainModel.StartDate) @Html.ValidationMessageFor(model => model.MainModel.StartDate) 
 My content 
  

因此，众所周知，当我的模型中的StartDate字段无效时，显示错误消息并且如果有效则隐藏它。 现在我想为此过程添加另一个操作。 我需要如果StartDate值为Invalid show "targetDiv" div ，如果StartDate值为Valid则隐藏它。 你的建议是什么？

Answer 1

您可以使用ModelState.IsValidField方法检查字段有效性

 
style="display:none" }> My content  

Answer 2

你必须首先validation你的表单（假设它有一个myForm的id，下面的代码包含在一个保存按钮点击function中）：

 $("#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 3

不显眼的validation会向validation元素添加一个css类，这就是它如何确定它是否显示或隐藏validation消息。 这是一个考试：

 
 Start date   
 
Your div shown only if StartDate is invalid 

这就是你的html在源代码中的样子。 在StartDate输入中写入无效数据后，注意添加到输入和span元素的类会略有不同：

 
 Start date    

您可以检查span元素是否具有字段validation错误类并显示targetDiv 。 我模仿了不显眼的validation是如何工作的，并提供了工作样本：

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

问候。