Form Validation in MultiColumn ComboBox

23 Sep 20246 minutes to read

This demonstrates the creation of a form that includes a MultiColumn ComboBox, allowing the user to select an option from a list of items. The form also includes validation, which verifies that all required fields are filled out before the form can be submitted.

MultiColumn ComboBox inside edit form

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 the input is invalid, an error message will be displayed until a valid value is chosen.

• The EditForm component wraps the entire form, has the Model attribute set to the model variable of type, and triggers the OnValidSubmit() method when the form is submitted.
• The DataAnnotationsValidator component enables validation based on the Data Annotations attributes applied on 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() method when clicked.

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>