Blazor TelerikTextBox get value based on custom/Regex validation

Question

I have a button which is disabled until all text inputs are not null or empty. However, besides checking for null or empty I need to validate the based on a custom validator or regular expressions.

The structure of my components is: AllForms.razor contains <InfoForm.razor /> and <TelerikButton />

For now, I change a boolean if the text input is not null or empty. Can I also check if the filled-in value meets the requirements of the customvalidator/regex?

InfoModel.cs

InfoForm.razor

                <FormItem Field="@nameof(_psfValidator.Email)">
                    <Template>
                        <div class="input-field">
                            <label for="email"><b>E-mail<span>*</span></b></label>
                            <TelerikTextBox PlaceHolder="E-mailadres" Value="@_psfValidator.Email" ValueChanged="@( (string s) => EmailOnChangeHandler(s) )" ValueExpression="@( () => _psfValidator.Email )"></TelerikTextBox>
                            <TelerikValidationMessage For="@(() => _psfValidator.Email)"></TelerikValidationMessage>
                        </div>
                    </Template>
                </FormItem>
                <FormItem Field="@nameof(_psfValidator.PhoneNumber)">
                    <Template>
                        <div class="input-field">
                            <label for="email"><b>Telefoon</b></label>
                            <TelerikTextBox PlaceHolder="Telefoonnummer" Value="@_psfValidator.PhoneNumber" ValueChanged="@( (string s) => PhonenumberOnChangeHandler(s) )" ValueExpression="@( () => _psfValidator.PhoneNumber )"></TelerikTextBox>
                            <TelerikValidationMessage For="@(() => _psfValidator.PhoneNumber)"></TelerikValidationMessage>
                        </div>
                    </Template>
                </FormItem>

AllForms.razor

<InfoForm.razor />

<TelerikButton ButtonType="ButtonType.Button" ThemeColor="primary" OnClick="@(() => { Value += 1; NextHandler(); })">Verder</TelerikButton>

Answer 1

I fixed my issue. I put a Regex check inside the method that is called on ValueChanged .

If true the bool will be set to true, if not the bool will stay false and the button will stay disabled untill it matches the Required and Regex .