即使从选择标签中选择项目后，仍然会出现验证消息

Question

我使用不显眼的验证来验证客户端的表单，如果我单击提交按钮，则会出现验证消息，如果我开始在输入字段中输入，验证消息就会消失，选择标签会出现问题，如果我从列表中，验证消息仍然出现。

这是

Business

课程

public class Business
{
    [Key]
    public int Id { get; set; }
    
    [Required]
    public string? Name { get; set; }

    [Required(ErrorMessage = "Please select business type")]
    public int? BusinessTypeId { get; set; }

    public BusinessType? BusinessType { get; set; }
    
}

BusinessType

班级

public class BusinessType
{
    public int Id { get; set; }

    [Required]
    public string? Name { get; set; }


    public ICollection<Business>? Businesses { get; set; }
}

还有

select

标签

 <select class="form-select" asp-for="BusinessTypeId" asp-items="@(ViewData["BusinessTypeList"] as SelectList)" data-control="select2" data-hide-search="true" data-placeholder="Select a Business type">
   <option value="">Select Business Type</option></select>
 <span asp-validation-for="BusinessTypeId" class="text-danger"></span>

Answer 1

试试这个

public static class SelectListHelper
{
    public static async Task<List<SelectListItem>> BusinessTypes(this ApplicationDbContext dbContext, int? selected = null)
    {
        var data = await dbContext.BusinessTypes.Select(s => new SelectListItem
        {
            Text = s.Name,
            Value = s.Id.ToString(),
            Selected = s.Id == selected
        }).ToListAsync();

        return data.prepend(new SelectListItem(){ Text = "Select a Business type", Value = null });
    }
}

您的商务舱

 public class Business
 {
    [Key]
    public int Id { get; set; }

    [Required]
    public string? Name { get; set; }

    [Required(ErrorMessage = "Please select business type")]
    public int? BusinessTypeId { get; set; }
 }

然后你的看法

@model Business
@inject ApplicationDbContext context;

<select class="form-select" asp-for="BusinessTypeId" asp-items="SelectListHelper.BusinessTypes(context, BusinessTypeId)" data-control="select2" data-hide-search="true"></select>
<span asp-validation-for="BusinessTypeId" class="text-danger"></span>

Answer 2

尝试

Html.DropDownListFor

获取下拉列表。

Inside Controller Action Method

Viewbag.BusinessTypeList = new SelectList(dbcontext.BusinessType.ToList(),"Id","Name");

Inside View

@Html.DropDownListFor(model => model.BusinessTypeId, ViewBag.BusinessTypeList as SelectList, 
     "-- Select Business Type ---",new { @class = "form-control" })

添加以下内容

jquery scripts

jquery.validate.js and jquery.validate.unobtrusive.js

Answer 3

我正在使用 select2，删除 #mySelect 更改事件上的“city-error”标签。

<div class="form-group mt-2">
   <label for="city">city</label>
   <select id="mySelect" name="CityId" class="form-select select2-hidden-accessible input-validation-error" data-placeholder="انتخاب کنید" data-val="true" data-val-required="required field" data-select2-id="city" tabindex="-1" aria-hidden="true" aria-describedby="city-error" aria-invalid="true">
      <option data-select2-id="2"></option>
      <option value="1">new york</option>
      <option value="2">california</option>
   </select>
   /*select2 auto generate tags*/
            .
            .
            .
            .
   <span class="text-danger field-validation-error" data-valmsg-for="CityId" data-valmsg-replace="true">
      <span id="city-error" class> required field. </span>
   </span>
</div>

$('#mySelect').on('change', function () {
   if($(this).val() != null &&
      $(this).val().length > 0 &&
      $('#' + $(this).attr('id') + '-error').length > 0)
         $('#' + $(this).attr('id') + '-error').remove(); 
  })