1. Home
  2. Forum
  3. Blazor
  4. How to set SfTextBox color and border to Red upon validation error

How to set SfTextBox color and border to Red upon validation error

I am using SyncFusion Blazor v18.1.0.43

I am in the process of moving my current project InputText, InputNumber and InputTextArea to DfTextBox, SfNumericTextBox and SfRichTextEditor. However, one of the nice features of using InputTextBox with Bootstrap 4 theme is that I was able to show the textbox outlined in red with a pale red inside to make it easier for the user to see the input that needed attention. This was achieved by overriding the CSS for the form-control .invalid  as follows;

.form-control.invalid {
    border-color: red;
    background-color: #ffdddd
}

and here is an example of the one of the current controls in my  .razor page;

<div class="form-group">
    <label for="name">Name</label>
    <SfTextBox id="name" CssClass="form-control"
                              @bind-Value="@NewProduct.Name">
    </SfTextBox>
    <ValidationMessage For="@(() => NewProduct.Name)" />
</div>


I have added the CssClass="form-control" to my SfTextBox control, but I am not hitting the css style so I assume you are using a different css tag, probably something that starts with e-xxxxx. Can you provide that css tag or do you have another way to allow me to light up the textbox when it has invalid data. 

I see that you have an example of validation for the textbox in the documentation that shows I can set the CssStyle to "e-error" but changing the style in the code page would mean a lot of extra code for each control that I didn't have to use before. I am hoping you have a better solution.   

FYI - A am getting the validation text messages in the ValidationMessage For component, just not seeing the exptected border and color change of the actual SfTextBox control.   


1 Reply
BC Berly Christopher Syncfusion Team April 15, 2020 09:54 AM UTC

Hi David, 

Greetings from Syncfusion support.  

Currently Syncfusion Blazor TextBox component does not have the requested requirement. Also, we have already logged to provide this option as a built-in support for TextBox component. We will include this feature any one of our upcoming releases. We appreciate your patience until then.  
  
You can track the status of the requested requirement from the below feedback link.   
 

So, we need to achieve the requested requirement by adding the CssClass for the TextBox component as mentioned below. 

@using Syncfusion.Blazor.Inputs 
@using Syncfusion.Blazor.Buttons 
@using System.ComponentModel.DataAnnotations; 
 
<div class="row"> 
    <div style="width:100%;margin:20px;"> 
        <EditForm EditContext="@editContext"> 
            <DataAnnotationsValidator /> 
            <div class="form-group"> 
                <SfTextBox Placeholder="Test Property" FloatLabelType='@FloatLabelType.Always' @bind-Value="model.TestProperty" CssClass="@cssClass" Blur="TestPropertyBlurEvent"></SfTextBox> 
                <ValidationMessage For="() => model.TestProperty" /> 
            </div> 
            <SfButton IsPrimary="true" HtmlAttributes="@(new Dictionary<string, object> { { "type", "submit" } })">Save</SfButton> 
        </EditForm> 
    </div> 
</div> 
@code{ 
    private void click() 
    { 
        cssClass = "cssclasschag"; 
    } 
    private Test model; 
    private EditContext editContext; 
    private string cssClass { get; set; } 
    protected override void OnInitialized() 
    { 
        model = new Test(); 
        editContext = new EditContext(model); 
    } 
    public class Test 
    { 
        [Required] 
        public string TestProperty { get; set; } 
    } 
    public void TestPropertyBlurEvent(FocusOutEventArgs args) 
    { 
        if (!editContext.Validate()) 
        { 
            cssClass = "e-error"; 
        } 
        else 
        { 
            cssClass = "e-success"; 
        } 
        StateHasChanged(); 
    } 
}  

For your convenience we have prepared the sample and attached it below. 
 
 
Regards, 
Berly B.C

Loader.
Up arrow icon