DropdownList validation

[ALI]

Hi

im using dropdownlist with DataAnnotation RequiredAttribute

but when model is not valid the dropdown border color not change to red 

Is there a special way to validation dropdown ?

 <SfDropDownList FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains"

                                            @bind-Value="@ModelObject.UnitId"

                                            FloatLabelType="FloatLabelType.Auto"

                                            TItem="SelectWorkgroupUnitViewModel"

                                            FilterBarPlaceholder="search"

                                            Placeholder="unit"

                                            TValue="int?"

                                            AllowFiltering="true"

                                            ShowClearButton="true"

                                            DataSource="@Units"

                                           

                                         >

                                      <Syncfusion.Blazor.DropDowns.DropDownListFieldSettings Text="UnitName" Value="Id"></Syncfusion.Blazor.DropDowns.DropDownListFieldSettings>

                            </SfDropDownList>

my model

public class Model

{

 

        [Required(ErrorMessage = "please select unit")]

        public  int? UnitId { get; set; }

}

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi ALI,

Greetings from Syncfusion support.

We have checked your requirement. We would like to inform you that you can manually add the border for dropdownlist when the control has value by validating in the change event.


 

<EditForm Model="@model"> 

  <SfDropDownList TValue="string" TItem="Countries" CssClass="@Validate" Width="200px" ShowClearButton="true" Placeholder="e.g. Australia" DataSource="@Country"> 

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

      <DropDownListEvents TValue="string" ValueChange="OnChange"></DropDownListEvents> 

  </SfDropDownList> 

</EditForm> 

public void OnChange(ChangeEventArgs<string> args) 

    { 

        if (args.Value == null) 

        { 

            this.Validate = "e-error"; 

        } 

        else 

        { 

            this.Validate = "e-success"; 

        } 

    } 

We have prepared sample for your convenience. Please find the sample in the below link.

Sample Link       : https://www.syncfusion.com/downloads/support/forum/157635/ze/Dropdownlist_Edit_Form_Validation991956043 

Screenshot:

Without value

 

 

With value

 

 

Please let us know if you need any further assistance on this. 

Regards, 

Jeyanth.

 

[ALI]

Hi Jeyanth Muthu Pratheeban Sankara Subramanian

thank you

this worked perfect 

The text box control automatically activates validation by setting the binding, but in Drop Down it must be done manually.

I think this is because Drop Down has a value of zero by default

Is my opinion correct?

Is there a way for automatic validation for Darp Down?

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi ALI, 

Thanks for you update. 

We would like to know you that we have already considered as an improvement in our end and these changes will be included in the Volume 3 release which is expected to be rolled out on 30^th September 2020.

We appreciate your patience until then. 

Regards, 

Jeyanth. 

[Andrea Bioli]

It doesn't work yet, on my side, out of the box: if you implemented this behaviour, could you please offer an example with the new functionality?

Thanks.

Andrea

[Berly Christopher]

Hi Andrea, 

  

We have prepared the sample based on the implemented behaviour when we used the DropDownList component inside the EditForm without done any manual interaction for validation and attached it below. 

  

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DDL_Editform_157635-1434740512  

  

Regards, 

Berly B.C 

[psyk]

Hello, 

can you please give me a sample where the TValue is an Int ? and dropVal is type int ?  It does not seems to work with type int

[Berly Christopher]

Hi Psyk, 

  

We have checked the DropDownList component TValue with int? and validation is working fine at our end. So, we have attached the sample and screenshot below. 

  

 

<EditForm Model="@model"> 

    <DataAnnotationsValidator /> 

    <SfDropDownList TValue="int?" TItem="Countries" Width="200px" ShowClearButton="true" @bind-Value="@model.dropVal" Placeholder="e.g. Australia" DataSource="@Country"> 

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

    </SfDropDownList> 

    <ValidationMessage For="() => model.dropVal" /> 

    <SfButton CssClass="e-small e-info" Type="submit" Content="Submit"></SfButton> 

</EditForm> 

 

 

@code{ 

    public class Countries 

    { 

        public string Name { get; set; } 

 

        public int? Code { get; set; } 

 

        [Required] 

        public int? dropVal { get; set; } = 2; 

    } 

 

    List<Countries> Country = new List<Countries> 

{ 

        new Countries() { Name = "Australia", Code = 1 }, 

        new Countries() { Name = "Bermuda", Code = 2 }, 

        new Countries() { Name = "Canada", Code = 3 } 

 

    }; 

    public Countries model = new Countries(); 

 

} 

 

 

Required validation	Success validation

 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_DropDown_App-1018795802  

  

Regards, 

Berly B.C 

[Ali Jaan]

When using a DropDownList with the DataAnnotation Required attribute, the border may not automatically turn red because the dropdown is already rendered with a selected default value or the validation CSS is not being applied correctly. To ensure proper validation, you should include an empty or placeholder option (such as “Select an option”) with an empty value so the Required attribute can trigger validation when nothing is chosen. Also make sure client-side validation is enabled and that the validation CSS classes (like input-validation-error) are correctly styled in your CSS. With the correct placeholder option and validation setup, the dropdown list will properly display a red border when the model state is invalid.

[Kundurthi Naga Siddartha Kundurthi Vennela Prasad]

Hi  Ali Jaan,

 

 

Thank you for your valuable suggestion we appreciate you pointing out a better way to handle this scenario. We have validated the details, and you can achieve the expected behavior by removing the initially assigned value for dropVal and updating the placeholder as required.

With this setup:

• No value will be selected in the dropdown list initially.
• When you click the Submit button without selecting a value, the validation will trigger, and the error message will appear with red borders (provided the CSS is applied correctly).
• Once a value is selected, the form will submit successfully.

This ensures the dropdown integrates smoothly with the Required attribute and displays the proper validation feedback.

 

For your reference, we have also included a sample along with a GIF demonstration below to illustrate the behavior more clearly.

Sample: https://blazorplayground.syncfusion.com/embed/VtBSChVzpPvHPdUI?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Gif: