Trigger Validation from EditContext onblur

[Loic Chotin]

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.

[Saranya Dhayalan]

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:  

https://www.syncfusion.com/downloads/support/forum/149516/ze/BlazorApp11454291853 

 

Could you please check the above sample and get back to us if you need further assistance on this? 

 

Regards, 

Saranya D 

[Loic Chotin]

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.

[Saranya Dhayalan]

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: 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/149516/ze/BlazorApp8-218961260 

 

Could you please check the above sample and get back to us if you need further assistance on this? 

 

Regards, 

Saranya D