Select list validation in asp.net core

Suggested Videos
Part 40 - Form tag helpers in asp.net core | Text | Slides
Part 41 - ASP.NET Core Model Binding | Text | Slides
Part 42 - ASP.NET Core model validation | Text | Slides

In this video we will discuss implementing required validation on a select list in ASP.NET Core. Let's understand this with an example.


Consider the following Create Employee Form




We want to make the "Department" field required. Among the options, we want Please Select as the first option. Please Select is not a valid selection, it is just an option to prompt the user to select a valid department.

The Department select list is bound to the following Dept enum.

public enum Dept

{

    None,

    HR,

    Payroll,

    IT

}

Department Select List HTML

Notice, we are using asp-items tag helper to bind Department select list to Dept enum

<div>

    <label asp-for="Department"></label>

    <div>

        <select asp-for="Department" asp-items="Html.GetEnumSelectList<Dept>()">

        </select>

    </div>

</div>

Select List First Option

We want the first option in the Select List to be Please Select. The easiest way to achieve this is by including an <option> element in the select list HTML as shown below.

<div>

    <label asp-for="Department"></label>

    <div>

        <select asp-for="Department" asp-items="Html.GetEnumSelectList<Dept>()">

            <option value="">Please Select</option>

        </select>

        <span asp-validation-for="Department" class="text-danger"></span>

    </div>

</div>

value attribute of the Please Select option element is set to an empty string. We are also using asp-validation-for tag helper to display the validation error. To apply red font-clolor to the validation error, we are using text-danger Bootstrap class.

Making Select List Required

The Select List is bound to Department property of the Employee model class. To make the Department Select List required, apply [Required] attribute on the Department property of the Employee class.

public class Employee

{

    public int Id { get; set; }

    public string Name { get; set; }

    public string Email { get; set; }

    [Required]

    public Dept Department { get; set; }

}

At this point if we run the project and submit the form without selecting a valid department from the select list we get the error - The value '' is invalid.



The error that we are getting here is not the required validation error. To prove this, remove the [Required] attribute from the Department property of the Employee class and you will still get the same error.

Let's first understand why we are getting this error - The value '' is invalid.

• The datatype of the Department property is Dept enum.
• By default an enum underlying data type is int.
• An empty string is set as the value for Please Select option of the select list in the HTML.
• So when this option Please Select is selected from the select list, the value empty string is used as the value for Department property whose underlying data type is int.
• Obviously an empty string is not a valid value for int.
• This is the reason we get - The value '' is invalid.
• Value types (such as int, float, decimal, DateTime) are inherently required and don't need the Required attribute.

Select List Required Validation

However, if you make the Department property, a nullable property by including a question mark then the [Required] attribute is needed to make the field a required field.

public class Employee

{

    public int Id { get; set; }

    public string Name { get; set; }

    public string Email { get; set; }

    [Required]

    public Dept? Department { get; set; }

}

If we now submit the form with Please Select option selected we get Required validation error as expected.