Skip to content
Merged
2 changes: 1 addition & 1 deletion aspnetcore/blazor/components/component-disposal.md
Original file line number Diff line number Diff line change
Expand Up @@ -331,7 +331,7 @@ protected override void OnInitialized()
}
```

The full example of the preceding code with anonymous lambda expressions appears in the <xref:blazor/forms/validation#validator-components> article.
The full example of the preceding code with anonymous lambda expressions appears in the <xref:blazor/forms/validation-advanced#validator-components> article.

For more information, see [Cleaning up unmanaged resources](/dotnet/standard/garbage-collection/unmanaged) and the topics that follow it on implementing the `Dispose` and `DisposeAsync` methods.

Expand Down
67 changes: 66 additions & 1 deletion aspnetcore/blazor/forms/binding.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ author: guardrex
description: Learn how to use binding in Blazor forms.
monikerRange: '>= aspnetcore-3.1'
ms.author: wpickett
ms.date: 08/24/2026
ms.date: 09/22/2026
uid: blazor/forms/binding
---
# ASP.NET Core Blazor forms binding
Expand Down Expand Up @@ -403,6 +403,71 @@ Developers aren't expected to interact with <xref:Microsoft.AspNetCore.Component

:::moniker-end

## `InputText` based on the input event

Use the <xref:Microsoft.AspNetCore.Components.Forms.InputText> component to create a custom component that uses the `oninput` event ([`input`](https://developer.mozilla.org/docs/Web/API/HTMLElement/input_event)) instead of the `onchange` event ([`change`](https://developer.mozilla.org/docs/Web/API/HTMLElement/change_event)). Use of the `input` event triggers field validation on each keystroke.

The following `CustomInputText` component inherits the framework's `InputText` component and sets event binding to the `oninput` event ([`input`](https://developer.mozilla.org/docs/Web/API/HTMLElement/input_event)).

`CustomInputText.razor`:

:::code language="razor" source="~/../blazor-samples/8.0/BlazorSample_BlazorWebApp/Components/CustomInputText.razor":::

The `CustomInputText` component can be used anywhere <xref:Microsoft.AspNetCore.Components.Forms.InputText> is used. The following component uses the shared `CustomInputText` component.

`Starship11.razor`:

:::moniker range=">= aspnetcore-9.0"

:::code language="razor" source="~/../blazor-samples/9.0/BlazorSample_BlazorWebApp/Components/Pages/Starship11.razor":::

:::moniker-end

:::moniker range=">= aspnetcore-8.0 < aspnetcore-9.0"

:::code language="razor" source="~/../blazor-samples/8.0/BlazorSample_BlazorWebApp/Components/Pages/Starship11.razor":::

:::moniker-end

:::moniker range="< aspnetcore-8.0"

```razor
@page "/starship-11"
@using System.ComponentModel.DataAnnotations
@inject ILogger<Starship11> Logger

<EditForm Model="Model" OnValidSubmit="Submit">
<DataAnnotationsValidator />
<ValidationSummary />
<CustomInputText @bind-Value="Model!.Id" />
<button type="submit">Submit</button>
</EditForm>

<div>
CurrentValue: @Model?.Id
</div>

@code {
public Starship? Model { get; set; }

protected override void OnInitialized() => Model ??= new();

private void Submit()
{
Logger.LogInformation("Submit called: Processing the form");
}

public class Starship
{
[Required]
[StringLength(10, ErrorMessage = "Id is too long.")]
public string? Id { get; set; }
}
}
```

:::moniker-end

## Custom input components

For custom input processing scenarios, the following subsections demonstrate custom input components:
Expand Down
10 changes: 5 additions & 5 deletions aspnetcore/blazor/forms/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ author: guardrex
description: Learn how to use forms in Blazor.
monikerRange: '>= aspnetcore-3.1'
ms.author: wpickett
ms.date: 11/11/2025
ms.date: 09/22/2026
uid: blazor/forms/index
---
# ASP.NET Core Blazor forms overview
Expand Down Expand Up @@ -35,7 +35,7 @@ The Blazor framework supports forms and provides built-in input components:

:::moniker range=">= aspnetcore-11.0"

In Blazor Web Apps that use static server-side rendering (static SSR), input components automatically participate in client-side validation when the form contains a <xref:Microsoft.AspNetCore.Components.Forms.DataAnnotationsValidator> component. For details, see <xref:blazor/forms/validation#client-side-validation-in-static-ssr-forms>.
In Blazor Web Apps that use static server-side rendering (static SSR), input components automatically participate in client-side validation when the form contains a <xref:Microsoft.AspNetCore.Components.Forms.DataAnnotationsValidator> component. For details, see <xref:blazor/forms/validation-client-side>.

:::moniker-end

Expand Down Expand Up @@ -187,7 +187,7 @@ In the next example, the preceding component is modified to create the form in t
* If the `<input>` form field contains more than ten characters when the **`Submit`** button is selected, an error appears in the validation summary ("`Id is too long.`"). `Submit` is **not** called.
* If the `<input>` form field contains a valid value when the **`Submit`** button is selected, `Submit` is called.

&dagger;The <xref:Microsoft.AspNetCore.Components.Forms.DataAnnotationsValidator> component is covered in the [Validator component](xref:blazor/forms/validation#validator-components) section. &Dagger;The <xref:Microsoft.AspNetCore.Components.Forms.ValidationSummary> component is covered in the [Validation Summary and Validation Message components](xref:blazor/forms/validation#validation-summary-and-validation-message-components) section.
&dagger;The <xref:Microsoft.AspNetCore.Components.Forms.DataAnnotationsValidator> component is covered in the [Data Annotations Validator component and custom validation](xref:blazor/forms/validation#data-annotations-validator-component-and-custom-validation) section. &Dagger;The <xref:Microsoft.AspNetCore.Components.Forms.ValidationSummary> component is covered in the [Validation Summary and Validation Message components](xref:blazor/forms/validation#validation-summary-and-validation-message-components) section.

`Starship2.razor`:

Expand Down Expand Up @@ -488,7 +488,7 @@ In Blazor Web Apps, client-side validation requires an active Blazor SignalR cir

## Client-side validation in static SSR forms

In Blazor Web Apps, forms in components that adopt static server-side rendering (static SSR) gain client-side validation automatically when a <xref:Microsoft.AspNetCore.Components.Forms.DataAnnotationsValidator> component is present in the form. For details, see <xref:blazor/forms/validation#client-side-validation-in-static-ssr-forms>.
In Blazor Web Apps, forms in components that adopt static server-side rendering (static SSR) gain client-side validation automatically when a <xref:Microsoft.AspNetCore.Components.Forms.DataAnnotationsValidator> component is present in the form. For details, see <xref:blazor/forms/validation-client-side>.

:::moniker-end

Expand All @@ -502,7 +502,7 @@ jQuery validation isn't supported in Razor components. We recommend any of the f

* Follow the guidance in <xref:blazor/forms/validation> for any of the following scenarios:
* Server-side validation in a Blazor Web App that adopts an interactive render mode.
* Client-side validation in [static SSR forms](xref:blazor/forms/validation#client-side-validation-in-static-ssr-forms).
* Client-side validation in [static SSR forms](xref:blazor/forms/validation-client-side).
* Client-side validation in a standalone Blazor WebAssembly app.
* Use native HTML validation attributes (see [Client-side form validation](https://developer.mozilla.org/docs/Learn/Forms/Form_validation)).
* Adopt a third-party validation JavaScript library.
Expand Down
Loading
Loading