Validating an input on keypress instead of on change in Blazor

Validating an input on keypress instead of on change in Blazor

In this post, I describe how to validate an input on oninput event instead of on onchanged event in ASP.NET Core Blazor.

Blazor comes with everything needed to create forms and validate them. You can create a form and validate fields using data annotations.

<EditForm Model="model">
    <DataAnnotationsValidator />

    <InputText @bind-Value="model.Text" />
    <ValidationMessage For="() => model.Text" />

    <div>
        Current value: @model.Text
    </div>

    <button class="btn btn-primary" type="submit">Submit</button>
</EditForm>

@code{
    Model model = new Model();

    class Model
    {
        [StringLength(maximumLength: 10, MinimumLength = 3)]
        public string Text { get; set; }
    }
}

While this works well, the validation occurs when the input loses the focus:

The <InputText> component uses the onchange event to bind the value, and so, to trigger the validation. This event is fired when the user commits the element's value. For a text input this means when the element loses focus. When you use the @bind directive, you can set the event to use. However, the InputTextcomponent doesn't expose another event. Let's try with a raw <input> element, so we can use the oninput event to bind the value:

<EditForm Model="model">
    <DataAnnotationsValidator />

    <input type="text" @bind-value="model.Text" @bind-value:event="oninput" />
    <ValidationMessage For="() => model.Text" />

    <div>
        Current value: @model.Text
    </div>

    <button class="btn btn-primary" type="submit">Submit</button>
</EditForm>

This time, the value is bound after every keystroke. But, the validation doesn't work anymore 😦

blazor .net asp.net core web

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

jQuery Ajax CRUD in ASP.NET Core MVC with Modal Popup

In this article, we’ll discuss how to use jQuery Ajax for ASP.NET Core MVC CRUD Operations using Bootstrap Modal. With jQuery Ajax, we can make HTTP request to controller action methods without reloading the entire page, like a single page application.

Blazor for ASP.NET Web Forms Developers PDF

In this blog post, I will share the Free e-book: Blazor for ASP.NET Web Forms Developers PDF. This book is great for ASP.NET Web Forms developers looking for guidelines. As well as strategies for migrating their existing apps to a modern, open-source, and cross-platform web framework.

MVC User Registration & Login with ASP.NET Core Identity

In this article, we will discuss the quickest way to use ASP.NET Core Identity for User Login and Registration in a new or existing MVC application.

Running WordPress on ASP.NET Core with Peachpie

In this article, you will learn how to use or integrate WordPress in ASP.NET and Running WordPress on ASP.NET Core, without PHP, or any source files on the server. The following demonstration will show you how to add WordPress as a frontend to an existing ASP.NET Core application step by step.

Clear session in asp net core

LIKE | COMMENT | SHARE | SUBSCRIBE Today I will show you how to clear session data after logout from web application using asp.net core... Source code link :...