Proper way to apply syncfusion css in <ValidationSummary /> and <ValidationMessage />

[Katrina]

Hi,

I'm currently exploring Syncfusion for Blazor, and I'd like to find out what is the proper way to apply Syncfusion's built-in css in a <ValidationSummary /> and/or <ValidationMessage />?

Sample code below:

<EditForm Model="@Contact" OnValidSubmit="@OnValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />                 <-- how do I apply syncfusion css here?    
    <div class="form-row">
        <div class="form-group col-md-3">
            <SfTextBox @bind-Value="@Contact.AccountNumber"
                       Placeholder="Account Number"
                       FloatLabelType="@FloatLabelType.Always"></SfTextBox>
            <ValidationMessage For="@(() => Contact.AccountNumber)"></ValidationMessage>                 <-- how do I apply syncfusion here?    
        </div>
    </div>

I'm asking because, I use CssClass to style SfButton this way: <SfButton CssClass="e-primary"> ...and I am wondering how to do it for
<ValidationSummary /> and/or <ValidationMessage />?

Thank you very much in advance!

[Sevvandhi Nagulan]

Hi Katrina, 

Greetings from Syncfusion support. 

In Blazor, you can set class or any other attributes to Blazor components using @attributes property in the taghelper. Refer to the below code and sample, 

    <EditForm Model="@Contact" OnValidSubmit="@OnValidSubmit"> 

        <DataAnnotationsValidator /> 

        <ValidationSummary @attributes="SummaryAttributes" /> 

    <div class="form-row"> 

        <div class="form-group col-md-3"> 

            <SfTextBox @bind-Value="@Contact.AccountNumber" 

                       Placeholder="Account Number" 

                       FloatLabelType="@FloatLabelType.Always"></SfTextBox> 

            <ValidationMessage For="@(() => Contact.AccountNumber)" @attributes="MessageAttributes"></ValidationMessage> 

        </div> 

    </div> 

</EditForm> 

 

@code { 

 

    public Model Contact = new Model(); 

 

    public Dictionary<string, object> MessageAttributes { get; set; } = new Dictionary<string, object>() { { "class", "MessageClass" } }; 

    public Dictionary<string, object> SummaryAttributes { get; set; } = new Dictionary<string, object>() { { "class", "SummaryClass" } }; 

 

 

    public class Model 

    { 

        public string AccountNumber { get; set; } 

    } 

 

    public void OnValidSubmit() 

    { 

 

    } 

} 

 

Reference link: https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#attribute-splatting-and-arbitrary-parameters  

Please find the sample below, 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorAttributes-1723408563 

Please check the above sample and get back to us if you need further assistance. 

Regards, 

Sevvandhi N 

[Katrina]

Oh I didn't know you can do that..thank you sir Sevvandhi!

[Sevvandhi Nagulan]

Hi Katrina,

We are glad to hear that our solution got worked. Please get back to us if you have any queries.

Regards,
Sevvandhi N