Form Validation in ComboBox

1 Dec 20252 minutes to read

This article demonstrates how to use the Syncfusion ComboBox within a Blazor EditForm to validate user input with data annotations. The example shows a form where the user selects an item from the ComboBox, and validation ensures required fields are completed before submission.

ComboBox inside edit form

The ComboBox component can be used inside an EditForm to create a form that includes a list for selecting an option. The EditForm component validates all data annotation rules using the DataAnnotationsValidator component.

When the ComboBox input is valid, the form is ready to be submitted. If the input is invalid, an error message will be displayed until a valid value is chosen.

• The EditForm component wraps the entire form, sets the Model to a view model (for example, Countries), and invokes a submit handler when the form is submitted.
• The DataAnnotationsValidator component enables validation based on data annotation attributes (such as [Required]) applied to model properties.
• The ValidationSummary component displays a summary of all validation errors in the form.
• The ValidationMessage component displays a validation error message for the specific model property bound to the ComboBox (for example, the Name property).
• The submit button submits the form and invokes the submit handler when clicked.

CSHTML

@using Syncfusion.Blazor.DropDowns; 
@using System.ComponentModel.DataAnnotations; 
 
<EditForm Model="@model" OnValidSubmit="handleSubmit"> 
    <DataAnnotationsValidator></DataAnnotationsValidator> 
    <ValidationSummary></ValidationSummary> 
    <SfComboBox TValue="string" TItem="Countries" Placeholder="e.g. Australia" Width="300px" @bind-Value="@model.Name" DataSource="@Country"> 
        <ComboBoxFieldSettings Value="Name"></ComboBoxFieldSettings> 
    </SfComboBox> 
    <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() 
    { 
 
    } 
}