We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Client side validation on dropdown list


I am trying to do a client side validation on a dropdownlist using the HTMLAttribute tag, but its not kicking in when I click submit button in my editform. Please see code below.

  <SfDropDownList FloatLabelType="FloatLabelType.Auto" TValue="string" TItem="LookupModel" Placeholder="Select PoC Country" DataSource="@ddlLookup_PocCountries" HtmlAttributes="@(new Dictionary<string,object>(){{"required", "true" } })" @bind-Value="_model.ClientPoCCountry" >

         <DropDownListFieldSettings Value="Value" Text="Text"></DropDownListFieldSettings>


Please advise?

2 Replies

SP Sureshkumar P Syncfusion Team February 3, 2022 02:20 PM UTC

Hi Andrew, 

We will validate the requirement in our component. We will update you in two business days (February 7th, 2022).  

Sureshkumar P 

SP Sureshkumar P Syncfusion Team February 8, 2022 06:40 AM UTC

We have prepared the sample with client-side validation.  
Find the code example here: 
@inject IJSRuntime JS 
    <div class="stackblitz-container material"> 
        <div class="control-section col-lg-12"> 
            <div id="local-data" class="col-lg-6" style="padding-top: 15px"> 
                <div class="content"> 
                    <form action="" name="registration"> 
                            <SfTextBox HtmlAttributes="@htmlattr1"></SfTextBox> 
                            <span class="error1" style="width:250px;"></span> 
                            <SfDropDownList TItem="GameFields" TValue="string" HtmlAttributes="@htmlattr" PopupHeight="230px" Placeholder="Select a game" DataSource="@Games"> 
                                <DropDownListEvents TItem="GameFields" TValue="string" ValueChange="OnChange"></DropDownListEvents> 
                                <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings> 
                            <span class="error2" style="width:250px;"></span> 
                        <input type="submit" value="submit" /> 
    protected override async Task OnAfterRenderAsync(bool firstRender) 
        await JS.InvokeAsync<string>("validation"); 
    private string textValue { get; set; } 
    public class GameFields 
        public string ID { get; set; } 
        public string Text { get; set; } 
    private List<GameFields> Games = new List<GameFields>() { 
        new GameFields(){ ID= "Game1", Text= "American Football" }, 
        new GameFields(){ ID= "Game2", Text= "Badminton" }, 
        new GameFields(){ ID= "Game3", Text= "Basketball" }, 
        new GameFields(){ ID= "Game4", Text= "Cricket" }, 
        new GameFields(){ ID= "Game5", Text= "Football" }, 
        new GameFields(){ ID= "Game6", Text= "Golf" }, 
        new GameFields(){ ID= "Game7", Text= "Hockey" }, 
        new GameFields(){ ID= "Game8", Text= "Rugby"}, 
        new GameFields(){ ID= "Game9", Text= "Snooker" }, 
        new GameFields(){ ID= "Game10", Text= "Tennis"}, 
    public string DropVal = "Game3"; 
    public string ChangeValue { get; set; } = "Basketball"; 
    public void OnChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, GameFields> args) 
        this.ChangeValue = args.ItemData.Text; 
    Dictionary<string, object> htmlattr1 = new Dictionary<string, object>() { { "name", "firstname" }, { "id", "firstname" } }; 
    Dictionary<string, object> htmlattr = new Dictionary<string, object>() { { "name", "games" }, { "id", "games" } }; 
Validation code [javascript.js] 
function validation() { 
    $(function() { 
            rules: { 
                firstname: "required", 
                games: "required", 
            errorPlacement: function (error, element) { 
            submitHandler: function (form) { 
Sureshkumar P 

Live Chat Icon For mobile
Up arrow icon