ASP.NET MVC 3客户端验证

问题描述：

public class ViewModel 
{ 
    [Display(Name = "firstname", ResourceType = typeof(Views.Validation))] 
    public string firstname { get; set; } 

    [Required(ErrorMessageResourceName="required", ErrorMessageResourceType = typeof(Views.Validation))] 
    [Display(Name="lastname", ResourceType = typeof(Views.Validation))] 
    public string lastname { get; set; } 

    ... 
}

和我的HTML视图：

... 
<div class="row valid showMsg"> 
    <div class="itemWrap clearfix"> 
     <label>@Html.LabelFor(model => model.firstname)<span class="iconReq">&nbsp;</span>:</label> 
     @Html.EditorFor(model => model.firstname) 
    </div> 
    <div class="info"> 
     <p class="errorMsg">@Html.ValidationMessageFor(model => model.firstname)</p> 
     <p class="infoMsg">info message here</p> 
     <p class="focusMsg">text on active</p> 
    </div> 
</div> 
...

如果你在我的HTML视图请注意，我有一个类<div class="row valid showMsg">“ showMsg“来控制我的<div class="info">中的消息显示。现在

，服务器验证我写了一个自定义HTML帮手补充说，那类“showMsg”到div时无效像这样：

public static MvcHtmlString ValidationRowFor<TModel, TProperty>(this HtmlHelper<TModel> html, Expression<Func<TModel, TProperty>> expression) 
{ 
    MvcHtmlString normal = html.ValidationMessageFor(expression); 

    if (normal != null) 
    { 
     return MvcHtmlString.Create("errorOn"); 
    } 

    return null; 
}

，并使用它，像这样：

<div class="row valid @Html.ValidationRowFor(model => model.firstname)">

我想为客户端验证做同样的事情。所以它会自动添加“showMsg”类时父错误。我会怎么做？

谢谢。

编辑：确定这适用于普通的HTML但不适用于MVC3？

$(function(){ 
var validator = $(".form").validate({ 
      highlight: function(element) { 
      $(element).parents().closest('div.row').addClass('errorOn'); 
      }, 

      unhighlight: function(element) { 
      $(element).parents().closest('div.row').removeClass('errorOn'); 
      } 
}); 
});

随着客户端验证你的意思是jQuery的或这样的事情，帮助您处理数据验证和显示错误？ – 2011-01-25 08:00:46

是的。我想'注入'或修改'jQuery.validate.unobtrusive.min.js'在ASP.NET MVC 3'新的'不显眼的客户端验证'，所以它会自动为我做。这意味着它会为每个无效条目添加该类。 – ShaneKm 2011-01-25 08:30:25

答

也许在电线之间的东西应该做的工作：

$(function() { 
    $('form').submit(function() { 
     $(this).validate().invalidElements().each(function() { 
      $(this).closest('div.row.valid').addClass('showMsg'); 
     }); 
    }); 
});

是否需要'$（document）.ready`？ – jgauffin 2011-01-25 11:54:53

答

，如果你使用jQuery的验证规则，你可以到这样的事情（我从我的项目的代码，我改变你需要，errorClass：

var contactsRules = { 
    errorClass: 'showMsg', 
    rules: { 
     Name: { required: true }, 
     Surname: { required: true }, 
     Email: { required: true, email: true } 
    }, 
    messages: { 
     Name: { 
      required: '<p class="errore">*</p>' 
     }, 
     Surname: { 
      required: '<p class="errore">*</p>' 
     }, 
     Email: { 
      required: '<p class="errore">*</p>', 
      email: '<p class="errore">*</p>' 
     } 
    } 
}

我假设你有一个名为 “联系人” 的形式，建立与此代码的js文件：

$(document).ready(function() { 
    var contactRules = ... //The code posted before this 
    $('#contact').validate(contactRules); 

    $('#contact').submit(function() { 
     return $(this).validate(); 
    }); 
});

我希望这可以帮助

ASP.NET MVC 3客户端验证

相关推荐