RequiredValidator update

Radzen Studio Blazor Server
1

Dear all,

I've started to test the Radzen Blazor components.
Got a question about the RequiredValidator.

Created a RadzenTemplateForm with the following validation:
<RadzenTextBox style="width: 100%;" Name="CompanyName" @bind-Value="registration.CompanyName" />

When submitting this example without any value is being set, the validation text is being shown (as expected).

I've also added the following input <RadzenNumeric TValue="int?" style="width: 100%;" Name="ChamberOfCommerceNumber" @bind-Value="registration.ChamberOfCommerceNumber" Change="LoopUpCompanyAsync" />

The LoopUpCompanyAsync method will automatically fill all properties of the registration object if the data is available. However the Validation messages will stay visible if values are added, is there a way to trigger the validation if object property values have been changed?

Also the e-mail validator accepts "bla@bla" as a valid e-mail is this correct?

Cheers Eric

2

Hi @espijk,

We will need a complete example that shows the validation issue. Normally it should update as shown here.

Also the e-mail validator accepts "bla@bla" as a valid e-mail is this correct?

The email validator uses the EmailAddressAttribute class to do the validation.

3

Hi Korchev,

Thank you for your reply.
See sample code below to make my question more clear.

  1. Select Business
  2. Select Submit ... You'll see the validators in action
  3. Enter some text in First name and move on to the next field
  4. The change event will add the value for the company, validator for company is still shown

Cheers! Eric

@page "/"

form .row { margin-bottom: 20px; } 
            @if (registration.IsPersonRegistration)
            {
                <div class="row">
                    <div class="col-md-4 align-items-center d-flex">
                        <RadzenLabel Text="Postal code *" />
                    </div>
                    <div class="col-md-8">
                        <RadzenTextBox style="width: 100%;" Name="PostalCode" @bind-Value="registration.PostalCode"  />
                        <RadzenRequiredValidator Component="PostalCode" Text="Required" Popup="@popup" Style="position: absolute" />
                    </div>
                </div>                    
            }
            <div class="row">
                <div class="col-md-4 align-items-center d-flex">
                    <RadzenLabel Text="Phone" />
                </div>
                <div class="col-md-8">
                    <RadzenTextBox style="width: 100%;" Name="Telephone" @bind-Value="registration.TelephoneNumber" />
                </div>
            </div>
        </RadzenFieldset>
    </div>
</div>
@if (!registration.IsPersonRegistration)
{
    <div class="row">
        <div class="col-md-8">
            <RadzenFieldset Text="Company">                    
                <div class="row">
                    <div class="col-md-4 align-items-center d-flex">
                        <RadzenLabel Text="Company *" />
                    </div>
                    <div class="col-md-8">
                        <RadzenTextBox style="width: 100%;" Name="CompanyName" @bind-Value="registration.CompanyName" />
                        <RadzenRequiredValidator Component="CompanyName" Text="Required" Popup="@popup" Style="position: absolute" />
                    </div>
                </div>                    
            </RadzenFieldset>
        </div>
    </div>
}

<div class="row">
    <div class="col-md-8">
        <div class="row justify-content-center">
            <div class="col-md-12 d-flex align-items-end justify-content-center" style="margin-top: 16px;">
                <RadzenButton ButtonType="ButtonType.Submit" Text="Submit"></RadzenButton>
            </div>
        </div>
    </div>
</div>

@code {
private Registration registration = new Registration();

private bool popup = false;


private void OnSubmitRegistration(Registration registration)
{

}

private async Task LoopUpAsync()
{
    try
    {
        registration.CompanyName = "Radzen";
    }
    catch(Exception ex)
    {

    }

}

public class Registration
{        
    public string FirstName { get; set; }
    public string NameInserts { get; set; }
    public string SurName { get; set; }
    public DateTime DayOfBirth { get; set; }        
    public string TelephoneNumber { get; set; }
    public string PostalCode { get; set; }
    public int? HouseNumber { get; set; }
    public string NumberAddition { get; set; }
    public string StreetName { get; set; }
    public string City { get; set; }
    public bool IsPersonRegistration { get; set; } = true;
    public int? ChamberOfCommerceNumber { get; set; }
    public string CompanyName { get; set; }
    public string CompanyStreetName { get; set; }
    public string CompanyHouseNumber { get; set; }
    public string CompanyNumberAddition { get; set; }
    public string CompanyPostalCode { get; set; }
    public string CompanyCity { get; set; }
    public string CompanyTelephoneNumber { get; set; }
    public string CompanyWebsite { get; set; }
    public string CompanyTaxNumber { get; set; }
    public bool HasCardIdentifier { get; set; } = false;
    public string FixedCardIdentifierNumber { get; set; } = "1119-8000-05";
    public string CardIdentifierNumber { get; set; }
    public bool GeneralTermsAndConditions { get; set; }
    public bool PrivacyConditions { get; set; }
}

}

4

You can try the following:

  1. Create a reference to the RadzenTemplateForm e.g. templateForm
  2. Invoke templateForm.EditContext.Validate() to refresh the validation in the Change event.
5

How can we do this ?

  1. Create a reference to the RadzenTemplateForm e.g. templateForm
6

In Radzen you need to use a custom attribute and create a field of type RadzenTemplateForm in the xxx.razor.cs file of your page:

namespace BlazorTest.Pages
{
    public partial class EditProductComponent
    {
      protected RadzenTemplateForm<BlazorTest.Models.Sample.Product> templateForm;
    }
}

image
image704×302 12.3 KB

2 Likes