Form Validation in Blazor MultiColumn ComboBox

14 Aug 20266 minutes to read

This article demonstrates how to use the Blazor MultiColumn ComboBox in a validated form with Blazor’s EditForm. It covers binding to a model, applying data annotations, and showing validation messages so the form submits only when required fields are valid.

MultiColumn ComboBox Inside an EditForm

The MultiColumn 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 MultiColumn ComboBox input is valid, the form is ready to be submitted; if invalid, a validation message is shown until a valid value is selected.

• The EditForm component wraps the entire form, has the Model attribute set to the model variable, and triggers the OnValidSubmit event when the form is submitted.
• The DataAnnotationsValidator component enables validation based on the [Required], [Range], and other data annotation attributes applied to the model properties.
• The ValidationSummary component displays a summary of all validation errors on the form.
• The ValidationMessage component displays a validation error message for the Name property of the model variable.
• The submit button submits the form and triggers the OnValidSubmit event when clicked.

Sample model

public class Order
{
    [Required(ErrorMessage = "Please select a product.")]
    public string Name { get; set; }
}

CSHTML

@using Syncfusion.Blazor.MultiColumnComboBox
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons;
@using System.ComponentModel.DataAnnotations;


<div class="col-lg-12 control-section">
    <div class="control-wrapper">
        @if (string.IsNullOrEmpty(Message))
        {
            <EditForm Model="@ProductModel" OnValidSubmit="@OnValidSubmit" OnInvalidSubmit="@OnInvalidSubmit">
                <DataAnnotationsValidator />
                <div>
                    <label class="example-label">Select a product</label>
                    <SfMultiColumnComboBox @bind-Value="@ProductModel.Name" DataSource="@Products" ValueField="Name" TextField="Name" Placeholder="Select any product" PopupWidth="600px">
                    </SfMultiColumnComboBox>
                    <ValidationMessage For="()=>ProductModel.Name" />
                </div>
                <div class="submit-btn">
                    <SfButton type="submit" IsPrimary="true">Submit</SfButton>
                </div>
            </EditForm>
        }
        else
        {
            <div class="alert alert-success">
                @Message
            </div>
        }
    </div>
</div>

@code {
    public Product ProductModel = new Product();
    public class Product
    {
        [Required(ErrorMessage = "Please select a product")]
        public string Name { get; set; }
        public decimal Price { get; set; }
        public string Availability { get; set; }
        public string Category { get; set; }
        public double Rating { get; set; }
    }
    private string Value { get; set; } = "Smartphone";
    private List<Product> Products = new List<Product>();
    protected override Task OnInitializedAsync()
    {
        Products = new List<Product>
        {
            new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
            new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
            new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 },
            new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 },
            new Product { Name = "Smartwatch", Price = 199.99m, Availability = "Limited Stock", Category = "Wearables", Rating = 4.4 },
            new Product { Name = "Monitor", Price = 129.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.6 },
            new Product { Name = "Keyboard", Price = 39.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.1 },
            new Product { Name = "Mouse", Price = 19.99m, Availability = "Out of Stock", Category = "Accessories", Rating = 4.3 }
        };
        return base.OnInitializedAsync();
    }
    private string Message = string.Empty;
    async void OnValidSubmit()
    {
        Message = "Form Submitted Successfully!";
        await Task.Delay(2000);
        Message = string.Empty;
        ProductModel.Name = null;
        StateHasChanged();
    }
    private void OnInvalidSubmit()
    {
        Message = string.Empty;
    }
}
<style>
    .control-wrapper {
        max-width: 250px;
        margin: 0 auto;
        padding: 50px 0px 0px;
    }

    .example-label {
        font-size: 14px;
        margin-bottom: 6px;
    }

    .submit-btn {
        display: flex;
        justify-content: center;
        padding: 20px 0px 0px;
    }

    .validation-message {
        color: red;
        padding: 5px 0px 0px;
    }
</style>