Form Validation in Dropdown List

4 Nov 20252 minutes to read

This article explains how to use the Syncfusion Blazor DropDownList component in a validated form. It shows how to bind to a model, apply data annotations, and display validation errors so the form can be submitted only when required fields are valid.

Dropdown List inside edit form

The DropDownList component can be placed inside an EditForm to enable data annotation–based validation through the DataAnnotationsValidator component. When the input is valid, the form can be submitted; if invalid, the corresponding validation message is shown until a valid value is selected.

• The EditForm component wraps the form, sets the Model to an instance of the model type (for example, Countries), and invokes the form’s submit handler on submission.
• The DataAnnotationsValidator component enables validation based on the data annotation attributes applied to the model’s properties (for example, [Required] on the bound field).
• The ValidationSummary component displays a summary of all validation errors in the form.
• The ValidationMessage component displays a validation error message for the specific bound property associated with the DropDownList.
• The submit button triggers form submission and executes the configured submit handler when clicked.

CSHTML

@using Syncfusion.Blazor.DropDowns; 
@using System.ComponentModel.DataAnnotations; 
 
<EditForm Model="@model" OnValidSubmit="handleSubmit"> 
    <DataAnnotationsValidator></DataAnnotationsValidator> 
    <ValidationSummary></ValidationSummary> 
    <SfDropDownList TValue="string" TItem="Countries" Placeholder="e.g. Australia" Width="300px" @bind-Value="@model.Name" DataSource="@Country"> 
        <DropDownListFieldSettings Value="Name"></DropDownListFieldSettings> 
    </SfDropDownList> 
    <ValidationMessage For="()=>model.Name"></ValidationMessage> 
    <button type="submit">submit</button> 
</EditForm> 
 
 
@code {  
    private Countries model = new Countries(); 
    public class Countries 
    { 
        [Required] 
        public string Name { get; set; } 
 
        public string Code { get; set; } 
    } 
 
    List<Countries> Country = new List<Countries> 
    { 
        new Countries() { Name = "Australia", Code = "AU" }, 
        new Countries() { Name = "Bermuda", Code = "BM" }, 
        new Countries() { Name = "Canada", Code = "CA" }, 
        new Countries() { Name = "Cameroon", Code = "CM" }, 
    }; 
    private void handleSubmit() 
    { 
 
    } 
}