Form Validation in MultiSelect

4 Nov 20254 minutes to read

Edit form validation

The MultiSelect component can be used inside an EditForm to build a form that supports selecting multiple values. The EditForm component validates data annotation rules via the DataAnnotationsValidator component.

When the MultiSelect input is valid, the form can be submitted. If the input is invalid, a validation message is displayed until a valid value is provided.

• The EditForm wraps the form, sets the Model parameter to a model instance, and wires up the form submit handler.
• The DataAnnotationsValidator enables validation based on data annotation attributes applied to model properties.
• The ValidationSummary displays a summary of all validation errors in the form.
• The ValidationMessage displays a validation error message for the property bound to the MultiSelect.
• The submit button submits the form and invokes the configured submit handler.

CSHTML

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

<EditForm Model="@model" OnValidSubmit="handleSubmit"> 
    <DataAnnotationsValidator></DataAnnotationsValidator> 
    <ValidationSummary></ValidationSummary> 
    <SfMultiSelect TValue="string[]" TItem="Countries" Placeholder="e.g. Australia" Width="300px" @bind-Value="@model.ValueObj" DataSource="@Country"> 
        <MultiSelectFieldSettings Value="Name"></MultiSelectFieldSettings>
    </SfMultiSelect>
    <ValidationMessage For="()=>model.Name"></ValidationMessage>        
<button type="submit">submit</button>
</EditForm>


@code {
private Countries model = new Countries();
public class Countries
{
public string Name { get; set; }

public string Code { get; set; }

[Required(ErrorMessage = "The Country field is required.")]
public string[] ValueObj { 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()
{

}
}

Selection Limit

The number of selectable items in the MultiSelect component can be limited by setting the MaximumSelectionLength property.

In the following example, the selection limit is set to three items, and the MultiSelect component displays the selected items in CheckBox mode.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfMultiSelect TItem="Country" TValue="string[]" Placeholder="e.g. Australia" MaximumSelectionLength=3 Mode="VisualMode.CheckBox" DataSource="@Countries">
    <MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>
</SfMultiSelect>

@code {

    public class Country
    {
        public string Name { get; set; }

        public string Code { get; set; }
    }

    List<Country>Countries = new List<Country>
    {
        new Country() { Name = "Australia", Code = "AU" },
        new Country() { Name = "Bermuda", Code = "BM" },
        new Country() { Name = "Canada", Code = "CA" },
        new Country() { Name = "Cameroon", Code = "CM" },
        new Country() { Name = "Denmark", Code = "DK" },
        new Country() { Name = "France", Code = "FR" },
        new Country() { Name = "Finland", Code = "FI" },
        new Country() { Name = "Germany", Code = "DE" },
        new Country() { Name = "Greenland", Code = "GL" },
        new Country() { Name = "Hong Kong", Code = "HK" },
        new Country() { Name = "India", Code = "IN" },
        new Country() { Name = "Italy", Code = "IT" },
        new Country() { Name = "Japan", Code = "JP" },
        new Country() { Name = "Mexico", Code = "MX" },
        new Country() { Name = "Norway", Code = "NO" },
        new Country() { Name = "Poland", Code = "PL" },
        new Country() { Name = "Switzerland", Code = "CH" },
        new Country() { Name = "United Kingdom", Code = "GB" },
        new Country() { Name = "United States", Code = "US" },
    };
}