Add validation to InputSelect with default placeholder string

Question

I´m using an InputSelect like this:

<InputSelect @bind-Value="ExampleName">
    <option>---</option>
    @foreach (var item in itemList)
    {
        <option>@item.Name</option>
    }
</InputSelect>
<ValidationMessage For="@(() => ExampleName)" />

The validation is implemented like this:

[Required(ErrorMessage = "Custom error message")]
public string ExampleName { get; set; }

If I select nothing from the input select, the validation works fine, because ExampleName does not contain anything and thus the [Required] attribute isn´t fulfilled. But as soon as I select a valid option, and select the placeholder (---) again, the validation tells me, that the input is valid. Of course it is, because --- is a string, but I don´t want it to be valid.

How can this option be included as non-valid?

devbf · Accepted Answer · 2020-09-30 06:19:40Z

2

Took me some time, but a simple value="" added to the option like this:

<option value="">---</option>

solves the problem, as the value bound to the InputSelect now only contains an empty string and not the string "---".

answered Sep 30, 2020 at 6:19

devbf

60111 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Robert Mrobo Over a year ago

It looks even great if you put the <option value="">---</option> on top of a 'optgroup` tag like this.

<InputSelect class="form-control" @bind-Value="_associationToCreate.SportingCode"> <option value="">---</option> <optgroup label="Select sporting code"> @foreach (var enumeration in Enumeration.GetAll<SportingCode>()) { <option value="@enumeration">@enumeration</option> } </optgroup> </InputSelect>

Daniel Carriveau · Accepted Answer · 2024-06-13 15:22:58Z

0

(Using .NET 6) An even better solution (imho) is to make the 1st element also hidden like the following:

<InputSelect @bind-Value="ExampleName">
    <option hidden value="">Select a Value</option>
    @foreach (var item in itemList)
    {
        <option>@item.Name</option>
    }
</InputSelect>

This hides the "placeholder" option and makes sure it cannot be a selected value.

edited Jun 13, 2024 at 15:22

answered Jun 13, 2024 at 14:33

Daniel Carriveau

214 bronze badges

Collectives™ on Stack Overflow

Add validation to InputSelect with default placeholder string

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related