how to standardize validation error styles - on validation text box elements exhibit different styles depended on validation type

[Yan Doldonov]

Hello Team, I have a situation where I need to validate a model within a form as part of a Blazor server project. I have a slight complication with this instance of form validation. I need to make certain properties required dynamically at run-time depended on user conditional selection. Brief Issue Summary (what i am looking to address): on validation - form fields exhibit different styles when displaying validation errors. I am using standard .Net Core validation attributes for static straight-forward validation of required properties. for properties that required to be made conditionally required - I inject appropriate attributes to Input component via HtmlAttributes="" as per documentation. The form contains a switch which is bound to a boolean property of the model - the value of which triggers HtmlAttributes parameters being passed to the Input element. My problem is that as a result of the validation - properties that are controlled by validation attributes are identified with differnt styles (marked red) in case they are invalid as opposed to elements that have "reqired: true" html attribute (which is marked blue when invalid). I am looking for a way to bring this validation styling behavior to a uniform.

[Yan Doldonov]

here is the model below:

[Yan Doldonov]

 public class TestModelOne

    {

        public string PropertyOne { get; set; }

        public string PropertyTwo { get; set; }

        [Required]

        public string PropertyThree { get; set; }

        [Required]

        public string PropertyFour { get; set; }

        [Required]

        public string PropertyFive { get; set; }

        public bool OptionOneSelected { get; set; }

    }

[Yan Doldonov]

and here is the form component

@page "/TestFormValidation"

@using Microsoft.AspNetCore.Components

@using DefaultEmptyBlazorProject.Models.TestModels

<div id="test-form-container">

    <div class="flex items-center text-sm">

        <label class="p-2"> Option #1 </label>

        <SfSwitch @bind-Checked="TestModelOne.OptionOneSelected"></SfSwitch>

        <label class="p-2"> Option #2 </label>

    </div>

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

        <DataAnnotationsValidator />

        <div class="container flex flex-col md:flex-row lg:flex-row xl:flex-row 2xl:flex-row">

            @if (TestModelOne.OptionOneSelected)

            {

                <div class="basis-1/2 px-2">

                    <SfTextBox @bind-Value="@TestModelOne.PropertyOne" HtmlAttributes="@OptionOneRequiredHtmlAttr" Placeholder="enter property one value" FloatLabelType="@FloatLabelType.Auto"></SfTextBox>

                </div>

            }

            else

            {

                <div class="basis-1/2 px-2">

                    <SfTextBox @bind-Value="@TestModelOne.PropertyTwo" HtmlAttributes="@OptionTwoRequiredHtmlAttr" Placeholder="enter property two value" FloatLabelType="@FloatLabelType.Auto"></SfTextBox>

                </div>

            }

        </div>

        <div class="container flex flex-col md:flex-row lg:flex-row xl:flex-row 2xl:flex-row">

            <div class="basis-2/3 px-2">

                <SfTextBox @bind-Value="@TestModelOne.PropertyThree" required="true" Placeholder="enter property three value" FloatLabelType="@FloatLabelType.Auto"></SfTextBox>

            </div>

        </div>

        <div class="container flex flex-col md:flex-row lg:flex-row xl:flex-row 2xl:flex-row">

            <div class="basis-2/5 px-2">

                <SfTextBox @bind-Value="@TestModelOne.PropertyFour" Placeholder="enter property four value" FloatLabelType="@FloatLabelType.Auto"></SfTextBox>

            </div>

            <div class="basis-3/5 px-2">

                <SfTextBox @bind-Value="@TestModelOne.PropertyFive" Placeholder="enter property five value" FloatLabelType="@FloatLabelType.Auto"></SfTextBox>

            </div>

        </div>

        <div class="container columns-1 flex justify-center">

            <div class="mt-8 w-5/12">

                <SfButton HtmlAttributes="@SaveBtnHtmlAttr" IsPrimary="true" CssClass="e-success w-full uppercase">Submit</SfButton>

            </div>

        </div>

    </EditForm>

</div>

@code {

    [Parameter]

    public TestModelOne TestModelOne { get; set; }

    protected override async Task OnInitializedAsync()

    {

        await base.OnInitializedAsync();

        TestModelOne = new TestModelOne();

    }

    private void OnValidSubmit()

    {

    }

    private Dictionary<string, object> SaveBtnHtmlAttr => new()

    {

        {"title","Next" },

        {"type","submit" }

    };

    private Dictionary<string, object> OptionOneRequiredHtmlAttr

        => TestModelOne.OptionOneSelected

            ? new() { { "required", "true" } }

            : new() { { "required", "false" } };

    private Dictionary<string, object> OptionTwoRequiredHtmlAttr

        => TestModelOne.OptionOneSelected

            ? new() { { "required", "false" } }

            : new() { { "required", "true" } };

}

[Yan Doldonov]

elements marked with Html attributes are marked blue when in an invalid state:

another problem is - only first required item is identified. second required item is only identified as required after the first one is filled in.

and then - the properties marked with [Required] validation attribute are marked RED when they are deemed invalid. this poses inconsistency from the user experience standpoint.

is there a way to unify the behavior to provide same visual styling for validation errors identification?

Also - what is the approach to customize the "Please fill-out this field!" pop-up notification text?

thank you!

[UdhayaKumar Duraisamy]

Hi Yan,

We suggest you refer to the below documentation for changing the color of the Text Based on its Value. The color of the TextBox can be changed by validating its value using regular expression in the Input event.

Documentation :

1. https://blazor.syncfusion.com/documentation/textbox/how-to/change-the-color-of-the-textbox-based-on-its-value
2. https://blazor.syncfusion.com/documentation/textbox/style-appearance

Kindly try the above suggestion and let us know if this meets your requirement. If we misunderstood the requirement, we request you to provide additional details about the requirement as mentioned below. This will help us validate the requirement further and provide you with a better solution.

1. Exact Requirement details.
2. Requirement use case scenario.

Regards,

Udhaya Kumar D