asp.net mvc jquery 下拉验证

Posted

技术标签:

【中文标题】asp.net mvc jquery 下拉验证【英文标题】:asp.net mvc jquery dropdown validation 【发布时间】:2011-05-31 10:08:48 【问题描述】:

如何使用不显眼的 javascript 验证下拉列表?作为所需验证器的验证文本框,但它不适用于下拉列表?

需要更改不显眼的 js 文件吗?还是有任何其他选项来验证下拉列表?

我想在我的 javascript 中检查 form.validate() 时显示错误。

【问题讨论】:

【参考方案1】:
    $(function () 
        $("#form1").validate(
            rules: 
                ProductCategoryList: 
                    required: true
                

            ,
            messages: 
                ProductCategoryList: 
                    required: "This field is required"
                
            
        );
    );

【讨论】:

【参考方案2】:

我见过的最好的方法是使用 jQuery 表单验证插件:

http://plugins.jquery.com/project/validate

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

【讨论】:

【参考方案3】:

标记

 <p>
        <label for="ProductCategoryList">Product Categories</label>
        <%= html.DropDownList("ProductCategoryList", ViewData["ProductCategories"] as SelectList)%>
    </p>

还有验证脚本

        $.validator.addMethod("selectNone",
            function (value, element) 
                return this.optional(element) || element.selectedIndex != 0;
            ,
           "Please select an option."
        );


        $(function () 
            $("#form1").validate(
                rules: 
                    ProductCategoryList: 
                        selectNone: true
                    

                ,
                messages: 
                    ProductCategoryList: 
                        selectNone: "This field is required"
                    
                
            );
        );

【讨论】:

【参考方案4】:

我通过在 Viewmodel 上创建一个属性来完成这项工作,该属性用于绑定到 DropDownList 中的选定项。举个例子就清楚了:

视图中的代码:

        <div class="editor-field">
           @Html.DropDownListFor(model => model.SelectedPlantID,
                                 new SelectList(Model.Plants, "Value", "Text"),
                                 " ", new  id = "ddlPlant" )

          @Html.ValidationMessageFor(model => model.SelectedPlantID)
    </div>

ViewModel 中的代码将是(强输入到视图中):

            private List<SelectListItem> _plants = new List<SelectListItem>();
    [Required]
    [Display(Name = "Plant")]
    public List<SelectListItem> Plants
    
        get
        
            return (_plants);
        

        set
        
            _plants = value;
        
    

    public Guid SelectedPlantID
    
        get;
        set;
    

注意:SelectedPlantID 不必是模型上的字段。

希望这对你有用!

【讨论】:

请注意,我的下拉列表中的选定选项设置为空白 ("")。【参考方案5】:

您必须保留第一个选项 value="" 才能正常工作。

<asp:ListItem Value="">- Select Something -</asp:ListItem>

【讨论】:

【参考方案6】:

如果要集成验证jQuery需要指定字段

使用DropDownListFor 而不是DropDownList

@Html.DropDownListFor(c => c.Profile_Id, null, "-- Choose --", new  @class = "input-large" )

如果您的列表与字段同名,则无需输入ViewBag.Profile_Is as SelectList,因为如果您在列表中发送空值,则它不适用于编辑场景。

【讨论】:

以上是关于asp.net mvc jquery 下拉验证的主要内容,如果未能解决你的问题,请参考以下文章

在 ASP.NET MVC 中的下拉列表上触发 jQuery 更改事件并将参数传递给 url 操作

使用 Json 和 Jquery 的 Asp.net MVC4 中的级联下拉列表不填充

JQuery 验证忽略本地化文件 (ASP.NET MVC)

ASP.Net MVC:如何自定义验证消息显示

使用带有 jquery ajax 的 ASP.NET MVC 验证?

Asp.net MVC的验证