jquery 使用 bootstrap 选择器在 @Html.DropDownListFor 上验证

Question

我有一个 form 说我有 2 个控件。已使用 bootstrap-selectpicker 和 textbox 自定义的 select 控件，它们是 strongly typed 和 viewmodel。以下是项目结构的详细信息，这里是 DEMO and validation is using 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);
    }
}

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

覆盖此行为

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

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

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

jquery 使用 bootstrap 选择器在 @Html.DropDownListFor 上验证

jquery validate on @Html.DropDownListFor with bootstrap selectpicker

c#

jquery-validate

unobtrusive-validation

asp.net-mvc-4