jquery 验证 @Html.DropDownListFor 与引导选择选择器答案

【问题标题】：jquery validate on @Html.DropDownListFor with bootstrap selectpickerjquery 验证 @Html.DropDownListFor 与引导选择选择器
【发布时间】：2015-09-10 11:20:12
【问题描述】：

我有一个form，说我有 2 个控件。使用bootstrap-selectpicker 和textbox 自定义的select 控件，它们是strongly typed 和viewmodel。以下是项目结构的详细信息，这里是 DEMO 验证使用 jquery-validate

SampleViewModel.cs

public class SampleViewModel
{
        [Required(ErrorMessage="Please Select a Role")]
        //Not sure whether Required has to be assigned to RoleId or Roles
        public int RoleId { get; set; }
        public SelectList Roles { get; set; }
        [Required(ErrorMessage="Please Enter a name")]
        public string name{get;set;}
}

查看

<div class="container">
    <div class="col-md-6 col-md-offset-3">
        <h1>Hello Stranger</h1>
            @using (Html.BeginForm("", "", FormMethod.Post, 
                             new { enctype = "multipart/form-data", id="frmSample" }))
            {
                <div class="form-group">
                    @Html.DropDownListFor(m => m.RoleId, Model.Roles, "Please Select your Country", new{@class="selectpicker"})
                    @Html.ValidationMessageFor(m=>m.RoleId)
                </div>
                <div class="form-group">
                    @Html.TextBoxFor(m => m.name, null, new{@class="form-control"}) 
                    @Html.ValidationMessageFor(m=>m.name)
                </div>
                <button type="button" class="btn btn-success submit">Ask</button>
            }
            <br/><br/>
        </div>
</div>

控制器

public class HomeController : Controller
{
    [HttpGet]
    public ActionResult Index()
    {
        SampleViewModel model=new SampleViewModel();
        model.Roles = new SelectList(new string[] { "Admin", "Manager" });
        return View(model);
    }
}

$(document).ready(function(){
    $('.selectpicker').selectpicker();
    $("#frmSample").validate({
        onfocusout: true
    });
});
$('.submit').on('click',function(){
    if($("#frmSample").valid())
        alert(true);
});

问题

我面临的问题是我的dropdown 元素没有得到使用jquery validation 验证，而我的textbox 得到验证。问题可能是我初始化的方式或将 Required 属性分配给特定的 model 属性，我不确定为哪个分配required 属性。
我已经给了onfocusout:true 来验证是否聚焦，但除非你在textbox 上输入一些内容并删除内容，验证不会发生

非常感谢您对此的任何帮助。

【问题讨论】：

.selectpicker() 我假设是一个 jquery 插件，它将隐藏 <select> 元素并用它自己的 html 替换它。您需要修改验证器以验证隐藏的输入（默认情况下它们不是）。 [Required] 属性在 RoleId 属性上是正确的:)
总是有一个很好的回复@StephenMuecke，我期待这个.. :) 但根据我的研究，我需要根据 this question and answers 设置 ignore: [] 进行验证但这仍然没有帮助.. :(
这应该可以正常工作，但你的演示有@Html.ValidationMessageFor(m=>m.Roles) - 它应该是RoleId
我有 forked the fiddle here 表明它有效 :)
已更新fiddle here。需要休息一下，所以稍后会添加答案。

标签： c# asp.net-mvc-4 jquery-validate unobtrusive-validation

【解决方案1】：

您的 jquery 插件隐藏了 DropDownListFor() 方法生成的 <select> 元素 (display:none;) 并添加了自己的 html。默认情况下，jquery.validate.js 不会验证隐藏输入，因此您需要使用

覆盖此行为

$.validator.setDefaults({ 
  ignore: []
});

请注意，这将验证所有隐藏的输入，所以要验证这个，您可以使用 ignore: ":hidden:not('#RoleId')"

此外，您还有其他错误。您的 RoleId 属性是 typeof int 但您的 SelectList 将生成值为 strings（“Admin”和“Manager”）且不能绑定到 int 的选项。要么将属性更改为string RoleId，要么创建一个SelectList，其值为typeof int。例如，如果您有一个 Roles 表，其中包含字段 int ID 和 string Name，那么

var roles = db.Roles();
model.Roles = new SelectList(roles, "ID", "Name");

或

model.Roles = roles.Select(r => new SelectListItem()
{
  Value = r.ID.ToString(),
  Text = r.Name
};

参考DotNetFiddle

【讨论】：