We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trigger Validation from EditContext onblur

Thread ID:

Created:

Updated:

Platform:

Replies:

149516 Nov 28,2019 12:40 PM UTC Dec 3,2019 06:24 PM UTC Blazor 3
loading
Tags: DatePicker
Loic Chotin
Asked On November 28, 2019 12:40 PM UTC

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 [Syncfusion]
Replied On 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 


Loic Chotin
Replied On 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.

Saranya Dhayalan [Syncfusion]
Replied On 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 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon