Custom css assignment to SfTextBox

[Nick]

I have a scenario where I assigned custom css to the Textbox control based on whether it is empty or not. "e-error" and "e-success" are part of the custom css. I want to add "e-error" when the textbox is empty and "e-success" when it is not. The textbox is assigned "e-success" when there is a change in value using the ValueChange method. The code works as expected when I add "e-error" to the textbox control for the first time and click on the form submit button.

But when I start typing in the textbox and then delete(or clear) the text and try to submit it again, it still maintains the "e-success" css from before and does not get replaced by the "e-error" css. Is there any way I can override the "e-success" once it has been attached to the control.

I have attached a sample.

Attachment: TestAppBlazorServer_736c7ba0.zip

[Vinitha Jeyakumar]

Hi Nick,

We have created a sample as per your requirements to add e-success and e-error CssClass using the Input event, which triggers when we type texts into the input and works as you expected.

Code snippet:

<EditForm Model="@productID">

   <SfTextBox  Placeholder="Enter a Numeric Values" FloatLabelType="@FloatLabelType.Auto" Input="OnInput" CssClass="@CssClass"></SfTextBox>

    <div class="center">

        <label class="cssWarning">@_emptyProdID</label>

    </div>

    <div style="padding-top: 20px;" class="center">

        <button type="submit" class="btn btn-primary">ENTER</button>

    </div>

</EditForm>

@code{

    public void OnInput(InputEventArgs args)

    {

       

        if (args.Value == "" || args.Value == null)

        {

            CssClass = "e-error";

            _emptyProdID = "Textbox cannot be empty!";

        }

        else {

            CssClass = "e-success";

            _emptyProdID = "";

        }

        this.StateHasChanged();

    }

   

    protected ProductID productID = new ProductID();

    protected class ProductID

    {

        public string ProductIDNo { get; set; }

    }

    public string CssClass { get; set; }

    protected string _emptyProdID;

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CSS_Text2017989805

Regards,

Vinitha

[Nick]

Hi Vinitha,

The same issue is here as well. If you assign 'e-success' to a control then you cannot override it with 'e-error' afterwards.

[Vinitha Jeyakumar]

Hi Nick,

We couldn't replicate the reported issue as you said, with the sample we have attached in the last update. we have also prepared a video illustration for your reference,

Video illustration: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Video_css-1812885359

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CSS_Text2017989805

Can you please provide a video of issue replication to further validate on our end and modify the attached sample with the issue reproducing code.

Regards,

Vinitha

[Nick]

The issue happens when

1. I use the clear button in the textbox to clear out the values in it. In that case, the 'e-success' isn't replaced by 'e-error'.

2. When I enter a text in the textbox and I click elsewhere on the page, go back in and clear it. If I click on the submit button after that, it shows no css changes.

I have attached a video screenshot showing that along with the code.

https://imgur.com/a/PbXOBL9

Attachment: TestAppBlazorServer_684c7aa8.zip

[Deepak Ramakrishnan]

Hi Nick,

We have modified the sample by using “ValidateOnInput” (Validate the model value while typing instantly) property instead of input event .We have also attached the working sample for your reference.

<EditForm Model="@productID" OnValidSubmit="@submitForm">

    <DataAnnotationsValidator />

    <SfTextBox @bind-Value="productID.ProductIDNo" ValidateOnInput="true" Placeholder="Enter product ID" CssClass="@CssClass" FloatLabelType="@FloatLabelType.Auto"

               ShowClearButton="true" ></SfTextBox>

               <div class="center">

    <ValidationMessage For="@(() => productID.ProductIDNo)" class="cssWarning"/>

        </div>

    <div style="padding-top: 20px;" class="center">

        <button type="submit" class="btn btn-primary">ENTER</button>

    </div>

</EditForm>

Kindly revert us if you have any concerns in it.

Thanks,

Deepak R.

Attachment: TestAppBlazorServer_7ef6518.zip

[Nick]

Hi,

I cannot use the "required" attribute as there are other factors that I haven't included in my example that prevents me from using it. I only want the css changes to be manually done from my end.

[UdhayaKumar Duraisamy]

Hi Nick,

We are validating the requirement. We will update the further details in two business days (21^st April 2022).

Regards,

Udhaya Kumar D

[UdhayaKumar Duraisamy]

Hi Nick,

We can achieve your requirement without using the EditForm Model. Since We can validate the EditForm model using the required attribute only. So, we suggest the provided workaround. Let us know if you face any complexity in the suggested workaround.

 

@page "/"

 

    <SfTextBox @bind-Value="productID.ProductIDNo" Placeholder="Enter product ID" CssClass="@CssClass" FloatLabelType="@FloatLabelType.Auto"

               ShowClearButton="true" Input="OnInput"></SfTextBox>

    <div class="center">

        <label class="cssWarning">@_emptyProdID</label>

    </div>

    <div style="padding-top: 20px;" class="center">

        <button class="btn btn-primary" @onclick="submitForm">ENTER</button>

    </div>

 

@code{

    protected ProductID productID = new ProductID();

 

    protected class ProductID

    {

        public string ProductIDNo { get; set; }

    }

 

    public string CssClass { get; set; }

 

    protected string _emptyProdID;

 

    protected override void OnInitialized()

    {

        CssClass = "shadow e-corner";

    }

 

    protected void submitForm()

    {

        var productIDNumber = productID.ProductIDNo;

        if (productIDNumber is null || productIDNumber == string.Empty)

        {

            this.CssClass = "shadow e-corner e-error";

            _emptyProdID = "Textbox cannot be empty!";

        }

    }

 

    public void OnInput(InputEventArgs args)

    {

        if (args.Value == "" || args.Value == null)

        {

            CssClass = "shadow e-corner e-error";

        }

        else

        {

            CssClass = "shadow e-corner e-success";

            _emptyProdID = "";

        }

        this.StateHasChanged();

    }

}

 

<style>

    .center {

        display: flex;

        justify-content: center;

    }

 

    .cssWarning {

        color: red;

        font-weight: 500;

    }

 

    .e-input-group.e-control-wrapper.e-corner {

        border-radius: 20px;

    }

 

    .shadow {

        box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.4);

    }

</style>

 

Regards,

Udhaya Kumar D

Attachment: TestAppBlazorServer_7925fce8.zip