1. Home
  2. Forum
  3. Blazor
  4. Trigger Validation from EditContext onblur

Trigger Validation from EditContext onblur

Hey guys,

I'm trying to see if we can switch to your Blazor components suite with my company and one of the features that we are currently using is to trigger the validation when we lost the focus on a control. Indeed we do trigger the validation rules define in our validators, fluent validation, and I can't make it work with your components.

The validation works when we submit our form but not when we lost the focus on a control like the EjsDatePicker.

Can you help us please?

ex:

<EditForm Model="ViewModel">
    <FluentValidationValidator />
                            <EjsDatePicker @bind-Value="@ViewModel.BirthDateDateTime"
                                           Max="@ViewModel.MaxBirthDateDatetime"
                                           Min="@ViewModel.MinBirthDateDatetime"
                                           ShowClearButton="true" />
</EditForm>

Best,
L.

3 Replies
SD Saranya Dhayalan Syncfusion Team November 29, 2019 12:04 PM UTC

Hi Loic  
 
Thank you for contacting Syncfusion support 
 
We have checked your query, validation triggers when we focus out the the Datepicker component by using FluentValidator. Please find the below code snippet: 
 
@using Syncfusion.EJ2.Blazor.Calendars 
@using System.ComponentModel.DataAnnotations; 
@using FluentValidation 
 
    <EditForm Model="annotation" OnValidSubmit="SaveCustomer"> 
        <FluentValidator Validator="custVal" /> 
 
        <h3>Your name</h3> 
        <EjsDatePicker ID='DatePick' @bind-Value="@annotation.date" Width="250px"></EjsDatePicker> 
        <ValidationMessage For="@(() => annotation.date)" /> 
 
        <p><button type="submit">Submit</button></p> 
    </EditForm> 
 
@code { 
   
    private Annotation annotation = new Annotation(); 
 
    CustomerValidator custVal = new CustomerValidator(); 
    public class CustomerValidator : AbstractValidator<Annotation> 
    { 
        public CustomerValidator() 
        { 
            RuleFor(customer => customer.date).NotEmpty(); 
            
        } 
    } 
    void SaveCustomer() 
    { 
        Console.WriteLine("TODO: Actually do something with the valid data"); 
 
    } 
 
    public class Annotation 
    { 
        [Required] 
        public DateTime? date { get; set; } = null; 
        [Required] 
        public Object dateRange { get; set; } = null; 
 
        [Required] 
        public DateTime? startDate { get; set; } = null; 
 
        [Required] 
        public DateTime? EndDate { get; set; } = null; 
    } 
} 
 
Startup.cs 
 
public void ConfigureServices(IServiceCollection services) 
        { 
            services.AddRazorPages(); 
            services.AddServerSideBlazor(); 
            services.AddSingleton<WeatherForecastService>(); 
            services.AddValidatorsFromAssemblyContaining<Program>(); 
        } 
 
 
 For your convenience we have prepared a sample. Please find the below sample link: 
 
Sample link:  
 
Could you please check the above sample and get back to us if you need further assistance on this? 
 
Regards, 
Saranya D 


LC Loic Chotin December 2, 2019 12:52 PM UTC

Hey Saranya D,

Thanks for your answer but that doesn't fix my issue of trigerring the validation rules when the date picker lost his focus.

Currently to be able to trigger the validation rules with a simple HTML input date control we do like this:


public class DocInputDateTime : InputDate
    {
        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            builder.OpenElement(0, "input");
            builder.AddMultipleAttributes(2, AdditionalAttributes.ExtractClassAttribute(out object classAttribute));
            builder.AddAttribute(2, "type", "date");
            builder.AddAttribute(4, "class", $"{EditContext.FieldCssClass(FieldIdentifier)} {classAttribute}");
            builder.AddAttribute(4, "value", BindConverter.FormatValue(CurrentValueAsString));
            builder.AddAttribute(5, "onchange", EventCallback.Factory.CreateBinder(this, __value => CurrentValueAsString = __value, CurrentValueAsString));
            builder.AddAttribute(6, "onblur",
                EventCallback.Factory.Create(this, _ =>
                {
                    this.EditContext.NotifyFieldChanged(this.FieldIdentifier);
                }));
            builder.CloseElement();
        }
    }


So we use the 'onblur' event to notify the current EditContext but I can't find the FieldIdentifier property for the EjsDatePicker control.

Is my explanation clear enough?

Best,
L.

SD Saranya Dhayalan Syncfusion Team December 3, 2019 06:24 PM UTC

Hi Loic 
 
We have clearly understood your query, Trigger Validation from EditContext using Blur event. please find the below code snippet 
 
RenderFragment DynamicComponent() => builder => 
    { 
        var dataVal = DateTime.Now; 
        var propInfoValue = typeof(Annotation).GetProperty("date"); 
        builder.OpenElement(0, "EditForm"); 
        builder.AddAttribute(1, "EditContext", EditContext); 
        builder.OpenComponent(2, typeof(EjsDatePicker)); 
        builder.AddAttribute(3, "Value", dataVal); 
        builder.AddAttribute(6, "Blur", 
        Microsoft.AspNetCore.Components.EventCallback.Factory.Create<Syncfusion.EJ2.Blazor.Calendars.BlurEventArgs>(this, onBlur)); 
        builder.CloseComponent(); 
        builder.CloseElement(); 
    }; 
 
public void onBlur(BlurEventArgs args) 
    { 
        //customize your code here 
    } 
For your convenience we have prepared a sample. Please find the below link: 
 
 
Could you please check the above sample and get back to us if you need further assistance on this? 
 
Regards, 
Saranya D 
 


Loader.
Up arrow icon