Form Validation in MultiSelect

26 Nov 20244 minutes to read

Edit form validation

The MultiSelect 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 MultiSelect 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 Countries, and triggers the handleSubmit() 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 handleSubmit() method when clicked.

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 example below, 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" },
    };
}