client side validation of <select> in asp.net MVC 4

本文关键字：asp in net MVC gt select of side lt client validation | 更新日期: 2023-09-27 18:00:57

我正在开发asp.net MVC应用程序。我的剃刀视图中有一个下拉列表：

 <select id="ddlAreaID">
 @foreach (var item in Model.Areas)
 {
     <optgroup label="@item.CityName">
     @foreach (var val in item.Areas)
     {
         var selected = (val.AreaID == Model.AreaID) ? "selected=selected" : string.Empty;
         <option value="@val.AreaID" @selected>@val.AreaName</option>
     }
     </optgroup>
 }
 </select>
 @Html.HiddenFor(m => m.AreaID)

我已经添加了第一个项目到收集像这样：

Areas.Insert(0, new CityInfo() 
{
    Areas = new List<AreaInfo>() 
    { 
        new AreaInfo() 
        { 
            AreaID = 0, 
            AreaName = "select an Area" , 
            CityName = "" 
        }
    }  
});

我想对此选择/下拉列表执行客户端验证，以便至少选择一个项目。我该怎么做？

请提出建议。

client side validation of <select> in asp.net MVC 4

您应该开始重构视图模型和视图。您当前的设计非常静态，并且存在一些耦合问题。例如，创建一个名为"Select an area！"的区域看起来已经是错误的。

我不知道您的视图模型是如何命名的，但例如concerncs，我将称之为ViewModel。视图模型表示视图的数据。因此，在您的用例中，您希望选择一个区域。您为视图提供了一组预定义的区域来渲染下拉列表。并且您希望返回用户选择。因此，您将以两个属性结束，表示此数据：

public class ViewModel
{
    public List<AreaModel> AvailableAreas { get; set; }
    public AreaModel SelectedArea { get; set; }
}

由于AvailableAreas是构建视图所必需的，因此可以定义一个接受区域列表的构造函数来初始化属性。但是，这不是强制性的。

在你看来，你现在可以使用助手来生成你的下拉列表：

@Html.DropDownListFor(m => m.SelectedArea, Model.AvailableAreas, "Select an area")

这真的简化了您的视图！现在，您还可以使用数据注释来启用客户端验证：

public class ViewModel
{
    public List<AreaModel> AvailableAreas { get; set; }
    [Required]
    public AreaModel SelectedArea { get; set; }
}

这应该会让你进入正确的方向。然而，我仍然看到您的选项组存在一些问题。如果你被迫使用它们，这里有一些值得阅读的内容：在Asp.netMVC中为optgroup功能使用Helper代码。

在提交表单之前，您可以使用jQuery验证所选索引是否大于0

$("form").submit(function(){
     if($("#ddlAreaID")[0].selectedIndex === 0) {
         // display error message
         return false;
     }
     return true; 
});

so that at least one item is selected

看看你的下拉列表，它不是一个多重选择任何下拉列表(其中包含选项(都会始终选择一个值(除非指定，否则默认情况下会选择第一个元素(。

此外，它不能选择多个值(因为它不是多选(。

在你的代码片段中，我也没有看到你添加了一个假人(例如，一个标记为"请选择一个选项"的选项(。

如果我认真对待你的问题，你不需要任何验证。

现在我假设将添加一个伪选项，并且您希望验证用户是否选择了除伪之外的任何选项。

首先：添加假人。

<select id="ddlAreaID">
    <!-- This is the dummy. Note that its value is "dummy" -->
    <option value="dummy">Please select an area...</option>
 @foreach (var item in Model.Areas)
 {
     <optgroup label="@item.CityName">
     @foreach (var val in item.Areas)
     {
         var selected = (val.AreaID == Model.AreaID) ? "selected=selected" : string.Empty;
         <option value="@val.AreaID" @selected>@val.AreaName</option>
     }
     </optgroup>
 }
</select>

你的选择列表(大概(会通过表格返回。所以你想做的是：

  • 提交表单时，在提交之前先捕获它
  • 检查是否未选择假人
  • 如果一切正常，可以提交表格
  • 如果验证失败，请不要提交表单

我假设您的表单有一个id(例如#myForm(。

$("#myForm").submit( function (event) {
    //The form has not yet submitted, and it is waiting for this function to complete.
    if( $("#ddlAreaID").val() === "dummy" ) //this needs to match the value you gave the dummy option
    {
        alert("You did not choose an area!");
        event.preventDefault(); //this line makes sure the form does not get submitted.
    }
    //If everything is still okay, we can simply exit the function. Form submission will continue.
});
相关文章：