Finbuckle.Html5Validation

1. Introduction
2. What's New in v9.0.0
3. Installation
4. Supported Data Annotations
5. FAQ
6. License

Introduction

Client side form validation in ASP.NET Core stinks.

Specifically, tag helpers and HTMLHelper methods generate non-standard validation attributes and require the use of the jquery.validate and jquery.validate.unobtrusive libraries.

This library overrides this behavior to generate standard HTML5 validation attributes.

What's New in v9.0.0

This section only lists release update details specific to v9.0.0. See the changelog file for all release update details.

⚠ BREAKING CHANGES

• .NET 6 support removed

Features

• add .NET 9 and package lockfile support (21606eb)

Installation

1. Add the Finbuckle.Html5Validation NuGet package to your project.

2. Add the Html5Validation service to your app:

using Finbuckle.Html5Validation;

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddHtml5Validation();

// Rest of app code omitted.

Supported Data Annotations

The following data annotations are supported:

Attribute	ASP.NET Core	Finbuckle.Html5Validation
[Required]	- data-val=true - data-val-required="{message}"	- required
[MinLength]	- minlength="{min}" - data-val=true - data-val-minlength="{message}" - data-val-maxlength-min="{min}"	- minlength="{min}"
[MaxLength]	- maxlength="{max}" - data-val=true - data-val-maxlength="{message}" - data-val-maxlength-max="{max}"	- maxlength="{max}"
[StringLength]	- minlength="{min}" - maxlength="{max}" - data-val=true - data-val-maxlength="{message}" - data-val-maxlength-max="{max}" - data-val-minlength="{message}" - data-val-maxlength-min="{min}"	- minlength="{min}" - maxlength="{max}"
[Range]	- data-val=true - data-val-range="{message}" - data-val-range-min="{min}" - data-val-range-max="{max}"	- min="{min}" - max="{max}"
[RegularExpression]	- data-val=true - data-val-regex="{message}" - data-val-regex-pattern="{regex}"	- pattern="{regex}"
[DataType(DataType.{type}]	- type="{type}" - data-val=true - data-val-{type}="{message}"	- type="{type}"
[EmailAddress]	- type="email" - data-val=true - data-val-email="{message}"	- type="email"
[Phone]	- type="tel" - data-val=true - data-val-phone="{message}"	- type="tel"
[Url]	- type="url" - data-val=true - data-val-url="{message}"	- type="url"

Note that [DataType(DataType.{type})] only supports simple types such as email, phone, and url.

Installation

1. Add the Finbuckle.Html5Validation NuGet package to your project.

2. In your app configuration add the Html5Validation service:

using Finbuckle.Html5Validation;

var builder = WebApplication.CreateBuilder(args);

// ... Add normal services.

// Add Finbuclke.Html5Validation.
builder.Services.AddHtml5Validation();

// ... rest of file omitted.

FAQ

• Why not just use the jquery.validate and jquery.validate.unobtrusive libraries?

  These libraries are not standard HTML5 validation attributes and require additional JavaScript libraries to work. This library generates standard HTML5 validation attributes that work out of the box with modern browsers.

• Does it have any imapct on server side validation?

  No, this library only affects client-side validation.

• Does this library work with Blazor?

  No, this library only works with ASP.NET Core MVC Razor Pages and MVC apps that use tag helpers and HTMLHelper form input methods.

License

This project is licensed under the MIT License. See LICENSE file for license information.