jQuery的上@ Html.DropDownListFor验证具有引导selectpicker [英] jquery validate on @Html.DropDownListFor with bootstrap selectpicker

问题描述

我有一个格式，其中说我有2个控制。已经使用引导-selectpicker 和文本框自定义的选择控制这是强类型与视图模型。下面是该项目结构的细节，这里是在 演示 并验证使用< STRONG> jQuery的-验证

I have a form where say I have 2 controls. A select control which has been customized using bootstrap-selectpicker and a textbox which are strongly typed with a viewmodel. Below are the details of the project structure and here is the 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);
});

问题

• 我现在面临的问题是我的下拉菜单元素没有得到
  使用验证 jQuery验证而我的文本变
  验证。可问题是，我初始化的方式或
  分配要求属性的特定模式
  属性，我不知道要指定哪一个要求
  属性。


• 我已经给 onfocusout在：真正的来焦点了，但除非验证
  你键入文本框的东西和删除内容，
  验证不会发生

• The problem I am facing is my dropdown element doesn't get validated using jquery validation whereas my textbox gets validated. May be the problem is the way I am initializing or assigning the Required attribute to the particular model attribute and I am not sure for which one to assign the required attribute.
• I have given onfocusout:true to validate on focus out but unless you type something on textbox and delete the content, the validation doesn't happen

任何帮助是非常AP preciated。

Any help on this is highly appreciated.

推荐答案

您的jQuery插件隐藏＆LT;选择＆GT; 元素的 DropDownListFor（ ）方法生成（显示：无; ），并增加了自己的HTML。默认情况下，所以你需要使用覆盖这种行为隐藏的输入不被 jquery.validate.js 验证

Your jquery plugin hides the <select> element that the DropDownListFor() method generates (display:none;) and adds its own html. By default hidden inputs are not validated by jquery.validate.js so you need to override this behavior using

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

请注意，这将验证所有隐藏的输入，因此只验证这一个，你可以使用忽略：：隐藏：不是（'＃角色ID'）

Note this will validate all hidden inputs so to just validate this one, you could use ignore: ":hidden:not('#RoleId')"

此外，你有其他错误。你的角色ID 属性的typeof INT ，但你的的SelectList 将产生与那些值字符串选项（管理员和经理），并且不能被绑定到 INT 。无论是属性更改为串角色ID 或创建一个的SelectList 与那些值的typeof INT 。例如，如果你有一个角色表的字段 INT ID 和字符串名称，然后

In addition, you have other errors. Your RoleId property is typeof int but your SelectList will generate options with values that are strings ("Admin" and "Manager") and cannot be bound to int. Either change the property to string RoleId or create a SelectList with values that are typeof int. For example if you have a Roles table with fields int ID and string Name, then

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的上@ Html.DropDownListFor验证具有引导selectpicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！