blazor editcontext validate for single field

Question

I have a blazor component and using editcontext with data annotations. I'm trying to validate on field at a time on keypress or onblur instead of validating entire form. can someone please help me with this issue:

Below is my code


      
  
    Year Of Birth: 
    
    
  
  
     Drivers License Id:
    
    
  


private EditContext editContext {get; set;}
private Model model = new () {};
protected override void OnInitialized()
{
  editContext = new(model);
}

MrC aka Shaun Curtis · Answer

On the normal Blazor Input controls update occurs when you exit the control.

To wire them up for the oninput event, you need to extend the existing controls. I've added the UpdateOnInput parameter to control which event the update is wired to.

Here's MyInputText:

public class MyInputText : InputText
{
    [Parameter] public bool UpdateOnInput { get; set; } = false;

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.OpenElement(0, "input");
        builder.AddMultipleAttributes(1, AdditionalAttributes);
        if (!string.IsNullOrWhiteSpace(this.CssClass))
            builder.AddAttribute(2, "class", CssClass);

        builder.AddAttribute(3, "value", BindConverter.FormatValue(CurrentValue));

        if (this.UpdateOnInput)
            builder.AddAttribute(4, "oninput", EventCallback.Factory.CreateBinder(this, __value => CurrentValueAsString = __value, CurrentValueAsString));
        else
            builder.AddAttribute(5, "onchange", EventCallback.Factory.CreateBinder(this, __value => CurrentValueAsString = __value, CurrentValueAsString));

        builder.AddElementReferenceCapture(6, __inputReference => Element = __inputReference);
        builder.CloseElement();
    }
}

The original is here: https://github.com/dotnet/aspnetcore/blob/main/src/Components/Web/src/Forms/InputText.cs

And MyInputNumber:

public class MyInputNumber : InputNumber
{
    [Parameter] public bool UpdateOnInput { get; set; } = false;
    
    private static readonly string _stepAttributeValue = GetStepAttributeValue();

    private static string GetStepAttributeValue()
    {
        // Unwrap Nullable, because InputBase already deals with the Nullable aspect
        // of it for us. We will only get asked to parse the T for nonempty inputs.
        var targetType = Nullable.GetUnderlyingType(typeof(TValue)) ?? typeof(TValue);
        if (targetType == typeof(int) ||
            targetType == typeof(long) ||
            targetType == typeof(short) ||
            targetType == typeof(float) ||
            targetType == typeof(double) ||
            targetType == typeof(decimal))
        {
            return "any";
        }
        else
        {
            throw new InvalidOperationException($"The type '{targetType}' is not a supported numeric type.");
        }
    }

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.OpenElement(0, "input");
        builder.AddAttribute(1, "step", _stepAttributeValue);
        builder.AddMultipleAttributes(2, AdditionalAttributes);
        builder.AddAttribute(3, "type", "number");

        if (!string.IsNullOrWhiteSpace(this.CssClass))
            builder.AddAttribute(4, "class", CssClass);

        builder.AddAttribute(5, "value", BindConverter.FormatValue(CurrentValueAsString));

        if (this.UpdateOnInput)
            builder.AddAttribute(6, "oninput", EventCallback.Factory.CreateBinder(this, __value => CurrentValueAsString = __value, CurrentValueAsString));
        else
            builder.AddAttribute(7, "onchange", EventCallback.Factory.CreateBinder(this, __value => CurrentValueAsString = __value, CurrentValueAsString));

        builder.AddElementReferenceCapture(8, __inputReference => Element = __inputReference);
        builder.CloseElement();
    }
}

Original here - https://github.com/dotnet/aspnetcore/blob/main/src/Components/Web/src/Forms/InputNumber.cs

Here's my test form:

@page "/"
@using System.ComponentModel.DataAnnotations;

Index

Hello, world!


    
    
        
            Value:
            
            
        
    
    
        
            First Name:
            
            
        
    
    
        
            Last Name:
            
            
        
    
    
        
            
                First Name: @this.model.FirstName - Last Name: @this.model.LastName - Value : @this.model.Value
            
        
    
    
        
            
        
    


@code {
    private MyModel model = new MyModel { FirstName = "Shaun", LastName="Curtis" };
    private EditContext? editContext;

    protected override void OnInitialized()
    {
        editContext = new EditContext(model);
        base.OnInitialized();
    }
    public class MyModel
    {
        [StringLength(10, ErrorMessage = "Too long (10 character limit).")]
        public string FirstName { get; set; } = string.Empty;

        [StringLength(10, ErrorMessage = "Too long (10 character limit).")]
        public string LastName { get; set; } = string.Empty;

        [Range(1, 10, ErrorMessage = "Wrong! (1-10).")]
        public int Value { get; set; }
    }
}

Based on these you should be able to find the code for the other controls and extend them yourself. Let me know if you run into difficulties and I'll look at the specific control.

Here's an example with the cursor in the Value control (just added 0):

enet · Answer

The following code snippet describes how you can subscribe to the OnFieldChanged event of the EditContext object and perform validation specific to a given field (EmailAddress). The OnFieldChanged event is raised when a field value changes (this happens when you navigate out of the input text box, right ?). The code simulate a call to a database to verify that the provided email does not exist in the database. If the email address do exist in the database, a validation message is displayed to let you know about this. After you type a new email address, your input passes validation, and the message is removed... If you enter the text enet.studio1@gmail.com, input validation will fail, as this is en email address that supposedly exists in the database. Copy and test:

@page "/"
@using System.ComponentModel.DataAnnotations


    

    
        Name: 
        
        

    
    
        Text: 
        
        
    
    
        Email: 
        
        
    
    

        

    


@code
    {

    private EditContext EditContext;
    private Comment Model = new Comment();
    ValidationMessageStore messages;

    protected override void OnInitialized()
    {
        EditContext = new EditContext(Model);
        EditContext.OnFieldChanged += EditContext_OnFieldChanged;
        messages = new ValidationMessageStore(EditContext);

    }


// Note: The OnFieldChanged event is raised for each field in the model
   private async void EditContext_OnFieldChanged(object sender, 
                                        FieldChangedEventArgs e)
    {
    
        await Task.Yield();

        var propertyValue = Model.EmailAddress;

        var emailExist = await EmailExist(propertyValue);

        if (emailExist)
        {
            messages.Clear(e.FieldIdentifier);
            messages.Add(e.FieldIdentifier, "Email already exists...");
        }
        else
        {
           messages.Clear(e.FieldIdentifier);
        }
     
       EditContext.NotifyValidationStateChanged();

    }


    // Simulate a database call to verify that the provided email does not exist in the database
    private async Task EmailExist(string emailAddress)
    {
        await Task.Yield();

        if(emailAddress == "enet.studio1@gmail.com")
            return true;

        return false;
    }

    public async Task HandleValidSubmit()
    {
        await Task.Run(() =>
        {
            Console.WriteLine("Saving...");
            Console.WriteLine(Model.Name);
            Console.WriteLine(Model.Text);
            Console.WriteLine(Model.EmailAddress);
        });
    }

    public class Comment
    {
        [Required]
        [MaxLength(10)]
        public string Name { get; set; }

        [Required]
        public string Text { get; set; }

        [Required]
        [EmailAddress]
        [DataType(DataType.EmailAddress)]
        public string EmailAddress { get; set; }
    }

}

It is not clear what validation you want to perform within the keypress event, so I will only focus on how you perform the validation, ignoring the intricacies of this event. Here's a rudimentary of validation performed in the keypress event:

void KeyHandler(KeyboardEventArgs args)
{
    // Read a key pressed at a time
    var propertyValue = args.Key;

    var fieldIdentifier = new FieldIdentifier(Model, "EmailAddress");

    // if the key "x" was pressed
    if (propertyValue == "x")
    {
        messages.Clear();
        messages.Add(fieldIdentifier, "Do not use `x` in your email 
                                                       address.");
    }
    else
    {
        messages.Clear();

    }

    EditContext.NotifyValidationStateChanged();
}

Here's a complete code snippet. Copy and text:

@page "/"
@using System.ComponentModel.DataAnnotations


    

    
        Name: 
        
        

    
    
        Text: 
        
        
    
    
        Email: 
        
        
    
    

        

    


@code
    {

    private EditContext EditContext;
    private Comment Model = new Comment();
    ValidationMessageStore messages;

    protected override void OnInitialized()
    {
        EditContext = new EditContext(Model);
        messages = new ValidationMessageStore(EditContext);

    }

   void KeyHandler(KeyboardEventArgs args)
   {
    // Read a key pressed at a time
    var propertyValue = args.Key;

    var fieldIdentifier = new FieldIdentifier(Model, "EmailAddress");

    // if the key "x" was pressed
    if (propertyValue == "x")
    {
        messages.Clear();
        messages.Add(fieldIdentifier, "Do not use `x` in your email 
                                                       address.");
    }
    else
    {
        messages.Clear();

    }

    EditContext.NotifyValidationStateChanged();
  }
   

    public async Task HandleValidSubmit()
    {
        await Task.Run(() =>
        {
            Console.WriteLine("Saving...");
            Console.WriteLine(Model.Name);
            Console.WriteLine(Model.Text);
            Console.WriteLine(Model.EmailAddress);
        });
    }

    public class Comment
    {
        [Required]
        [MaxLength(10)]
        public string Name { get; set; }

        [Required]
        public string Text { get; set; }

        [Required]
        [EmailAddress]
        [DataType(DataType.EmailAddress)]
        public string EmailAddress { get; set; }
    }

}

I'm trying enable/disable submit button based on error messages. Enabling the button when there are no error messages and form is valid. Trying to do this keypress or onblur..but having challenges

You need this:

And this:

protected string Disabled { get; set; } = "disabled";

And this:

  // Note: The OnFieldChanged event is raised for each field 
  // in the model
    private void EditContext_OnFieldChanged(object sender, 
                                   FieldChangedEventArgs e)
    {
       
        SetSaveDisabledStatus(e);

    }

And this:

private void SetSaveDisabledStatus(FieldChangedEventArgs e)
  {
        // Each time a field changes this code is executed. 
        // EditContext.Validate() returns true if
        // validation succeeded; that is, all the fields pass 
        // validation, in which case we assign the value null
        // to the property Disabled, and thus enabling the Save 
        // button.
        if (EditContext.Validate())
        {
            Disabled = null;
        }
        else
        {
            Disabled = "disabled";
        }
    }

Hope I did not miss anything as I type this code from head to fingers... No testing performed.

blazor editcontext validate for single field

2 Answers