用引导选择器在@Html.DropDownListFor上进行jquery验证

Question

我有一个form，这里说我有两个控件。使用select自定义的bootstrap-selectpicker控件和带有viewmodel的strongly typed控件。下面是项目结构的详细信息，下面是演示，验证使用jquery-验证

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);
    }
}

JS

$(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上键入某些内容并删除内容，否则验证不会发生

在这方面的任何帮助都是非常感谢的。

Answer 1

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

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

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

此外，您还有其他错误。您的RoleId属性是int类型，但是您的SelectList将生成值为strings ("Admin“和"Manager")且不能绑定到int的选项。要么将属性更改为string RoleId，要么创建一个具有int类型的值的SelectList。例如，如果您有一个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