Highlight Validation Errors

[Mike-E]

Hi Team Syncfusion,

I am implementing the accordion control, which is really well-done.  Great work out there.  The one trouble that I am having is that the accordion is in an EditForm and each accordion item has validation in it.  When a validation error occurs, it is not clear where it is.  

Is there a way to highlight the accordion item and/or expand it when it has a validation error in it?

In any case, please continue to do the great work out there.  I have had a lot of luck with implementing/using your controls as well as the great support on your forums here.

Thank you for any as

[Ravikumar Venkatesan]

Hi Mike,

Greetings from Syncfusion support.

We have validated your requirement “Is there a way to highlight the accordion item and/or expand it when it has a validation error in it?” at our end. We have achieved your requirement with help of the Expanded property of the Accordion item as mentioned below and the same is available in the shared sample.

[Index.razor]

<SfAccordion ID="AccordionElement" @ref="@Accordion">

    <AccordionEvents Created="OnCreate"></AccordionEvents>

    <AccordionItems>

        <AccordionItem Disabled=@DisableNameItem @bind-Expanded="ExpandNameItem">

            <HeaderTemplate>Sign In</HeaderTemplate>

            <ContentTemplate>

                <div id="Sign_In_Form" style="padding:10px">

                    ...................................

                </div>

            </ContentTemplate>

        </AccordionItem>

        <AccordionItem Disabled=@DisableEmailItem @bind-Expanded="ExpandEmailItem">

            <HeaderTemplate>Delivery Address</HeaderTemplate>

            <ContentTemplate>

                <div id="Address_Fill" style="padding:10px">

                    ...................................

                </div>

            </ContentTemplate>

        </AccordionItem>

        <AccordionItem Disabled=@DisablePasswordItem @bind-Expanded="ExpandPasswordItem">

            <HeaderTemplate> Card Details</HeaderTemplate>

            <ContentTemplate>

                <div id="Card_Fill" style="padding:10px">

                    ...................................

                </div>

            </ContentTemplate>

        </AccordionItem>

    </AccordionItems>

</SfAccordion>

 

@code{

    SfAccordion Accordion;

    SfTextBox EmailTextbox;

    SfTextBox PasswordTextbox;

    SfTextBox NameTextbox;

    public Boolean EmptyField { get; set; } = false;

    public Boolean ExpandNameItem { get; set; }

    public Boolean ExpandEmailItem { get; set; }

    public Boolean ExpandPasswordItem { get; set; }

 

    public async Task SaveDetails()

    {

        if (String.IsNullOrEmpty(NameTextbox.Value))

        {

            EmptyField = true;

            ExpandNameItem = true;

        }

        if (String.IsNullOrEmpty(EmailTextbox.Value))

        {

            EmptyField = true;

            ExpandEmailItem = true;

        }

        if (String.IsNullOrEmpty(PasswordTextbox.Value))

        {

            EmptyField = true;

            ExpandPasswordItem = true;

        }

        else

        {

            ExpandPasswordItem = false;

        }

        if (!String.IsNullOrEmpty(NameTextbox.Value) && !String.IsNullOrEmpty(EmailTextbox.Value) && !String.IsNullOrEmpty(PasswordTextbox.Value))

        {

            EmptyField = false;

            await AlertDialog.ShowAsync();

        }

    }

}

Kindly try the shared sample and let us know if you need any further assistance.

API(Expanded): https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionItem.html#Syncfusion_Blazor_Navigations_AccordionItem_Expanded

Regards,

Ravikumar Venkatesan

Attachment: blazoraccordionsample_a623f64d.zip

[Mike-E]

Thank you very much for taking the time to provide a sample, @Ravikumar.  It is greatly appreciated.  In my case, I am looking for something that works with the built-in ValidationSummary/EditContext/EditForm control.  Since it does not appear that something is already available for this, I will see if I can put something together and report back here with any solution.

Thank you again for your time and assistance.

[Mike-E]

Investigating this further, my particular issue is due to the fact that I am using a DataAnnotationsValidator as seen in this article:

https://docs.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-6.0

This is what is throwing the validation error and the accordion is not involved at this point because it is not expanded and thus any bindings/FieldIdentifier's have been created.

What I ended up doing is sort of hackish, but when a validation error occurs on the DataAnnotationsValidator I simply flip a boolean on the hosting component and bind that to the pertinent AccordionItem.  I was hoping for a more elegant way to handle this, but this will do for now.

Thank you again to the Syncfusion team there for helping out with a sample and taking the time to do so. 🙏

[Satheesh Kumar Balasubramanian]

Hi Mike,

Thanks for the update.

We are happy that your problem has been resolved now.

Regards,

Satheesh Kumar B