RadzenTextBox trim spaces

Anyone have a clever way to trim spaces in a TextBox after the user tabs away from it? I have a TextBox with a requiredvalidator and a regex validator and they work fine. But in the onchange, I'm doing a val1 = val1.Trim() and it reloads the new bound data into the textbox. However, my regex is failing it and it shouldn't?

It's like the regex validator doesn't see the bound object change it's value. I've tried forcing a form validation, but the regex validator is still failing the "old" value?

Thanks!

What are you trying to achieve? Did you try using the Change event of the RadzenTextBox? Also how is the validator configured? There are too many unknowns for us to help.

As I mentioned in my first post, yes, I am using OnChange event to do a Trim() on the bound variable. What I am trying to achieve:

Have a required validator.
Have a regex validator.
Trim spaces out of the textbox when the user tabs out of it.

Everythings works, except when trimming the spaces...the regex validator is failing the text that's in the box and it is 100% valid. The validator is still seeing the spaces?

Here is the OnChange:

protected async System.Threading.Tasks.Task LanGwTextBoxChange(string args)
{
     networkSettings.lanGW = networkSettings.lanGW.Trim();
}

Here is the textbox and validators:

<div class="col-3" style="padding-left: 0px; padding-right: 0px">
            <RadzenLabel Component="lanGWTextBox" style="text-align: right; width: 100%" Text="LAN GW IP Address">
            </RadzenLabel>
          </div>
          <div style="padding-left: 15px; padding-right: 15px">
            <RadzenTextBox style="display: block; width: 135px" @bind-Value="@(networkSettings.lanGW)" Name="LanGWTextBox" Change="@LanGwTextBoxChange">
            </RadzenTextBox>
            <RadzenRegexValidator Component="LanGWTextBox" Pattern="((?:[0-1]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\.){0,3}(?:[0-1]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])$" style="position: absolute" Text="Valid IP address required!" @ref="@regexValidator2">
            </RadzenRegexValidator>
            <RadzenRequiredValidator Component="LanGWTextBox" Popup="false" style="position: absolute" Text="Cannot be empty!">
            </RadzenRequiredValidator>
          </div>

You should trigger validation after changing a property. You can do that in the Change handler of the textbox.

Ok, tried forcing validation...the form submitted ok, but the red validation text was still on the screen after the base variable was trimmed. The regex validator didn't update itself? How do I get the validator to hide it's text if it's matched?

        protected async System.Threading.Tasks.Task LanGwTextBoxChange(string args)
        {
            saveDisabled = false;

            networkSettings.lanGW = networkSettings.lanGW.Trim();
            templateForm0.EditContext.Validate();
        }

Here is the screen when the validator is passed...notice the red text is visible...it should NOT be! I am positive the forced validation is happening...I set a breakpoint.

BTW, I am allowed to use multiple validators on a single textbox, yes?? Or is that causing a problem?

The problem is that changing the property does not immediately update the component Value. Blazor needs to run its data-binding before that. Try the following:


        protected async System.Threading.Tasks.Task LanGwTextBoxChange(string args)
        {
            saveDisabled = false;

            networkSettings.lanGW = networkSettings.lanGW.Trim();

            await System.Threading.Tasks.Task.Delay(1);

            templateForm0.EditContext.Validate();
        }

The await will yield execution to Blazor which seems to update the Value of the textbox and the validator works with the right one.

Here is what I tested with which seems to work as expected:

<RadzenTemplateForm @ref=@form TItem="Model" Data=@model>
    <RadzenLabel Text="IP" />
    <RadzenTextBox style="display: block" Name="Ip" @bind-Value=@model.Ip Change=@OnChange />
    <RadzenRequiredValidator Component="Ip" style="display:block" Text="IP is required" />
    <RadzenRegexValidator Component="Ip" Text="Valid IP required"
        Pattern="((?:[0-1]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\.){0,3}(?:[0-1]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])$"
        style="display: block"
        />
    <RadzenButton ButtonType="ButtonType.Submit" Text="Submit"></RadzenButton>
</RadzenTemplateForm>
@code {
    RadzenTemplateForm<Model> form;

    class Model
    {
        public string Ip { get; set; }
    }

    Model model = new Model();

    async Task OnChange(string ip)
    {
        model.Ip = ip.Trim();
        await Task.Delay(1);
        form.EditContext.Validate();
    }
}

Yes, this works!

Could I ask for a new feature....perhaps a trim property for RadzenTextBox that would either prevent entry of leading/trailing spaces or remove them when the control loses focus? Removing trailing spaces is unfortunately a common occurrence and the presence of them will cause a RegEx validator to fail unless they are removed.

Thank you so much for the help, it is appreciated!

We implemented a Trim property which will call the Trim() method when the value changes.

1 Like

Excellent! Thank you for the great support!! The autoscroll you added to the outline panel has greatly improved my productivity when working on large complex forms...thank you for that too!

Much Helpful Trim property in RadzenTextBox, but seems Trimming is not available for TextArea?

Hi @Attique_Khan,

Yes, it’s available only in the TextBox component - we accept pull requests!