dotnet / dotnet/aspnetcore

Blazor Form CSS: "valid" CSS should only be applied when the field has actually been validated.

Open
#18,884 12 comments 16 reactions 1 assignee Claimed by @danroth27 View on GitHub
affected-few area-blazor enhancement feature-blazor-builtin-components Pillar: Complete Blazor Web severity-minor
Dominant language
C#
Stars
38.4k
Forks
10.9k
Avg merge
2d 6h
Merged PRs (30d)
290

Description

### Describe the bug

Directly quoting from Bootstrap 4 Form Validation guidelines: https://getbootstrap.com/docs/4.4/components/forms/#validation

>Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the form. **Otherwise, any required field without a value shows up as invalid on page load.** This way, you may choose when to activate them (typically after form submission is attempted).

Contrary to that pattern / advice, **Blazor sets `valid` CSS to all form fields BEFORE they are validated in the first place!**

Unfortunately the `modified` CSS is also not helpful because it is not applied when the entire form is validated through submission / submit button. (We can't do `.modified.valid` CSS styling or something like that)

Related code: https://github.com/dotnet/aspnetcore/blob/8d46b3a64ea784c95dddeb9d421c7cda6de993a2/src/Components/Web/src/Forms/EditContextFieldClassExtensions.cs#L26-L43

Technically speaking, the form is in the state of "not valid" / "not validated" / "not known to be validated" until it is validated, so Blazor applying `valid` CSS to the field should be counted as bug...

If fixing this bug is not going to happen, maybe add this method to `EditContext` so I can roll my own field CSS method?

```cs
bool IsValidated(in FieldIdentifier)
```

### To Reproduce

```cs

```

Then witness in the inspect element browser window that
![image](https://user-images.githubusercontent.com/8892187/74058051-c7805100-4a17-11ea-8ebd-e7320abfd2a1.png) `valid` CSS is applied before the form is even touched.

### Further technical details
- ASP.NET Core 3.1.1
- Include the output of `dotnet --info`

```
.NET Core SDK (reflecting any global.json):
Version: 3.1.101
Commit: b377529961

Runtime Environment:
OS Name: Windows
OS Version: 10.0.18363
OS Platform: Windows
RID: win10-x64
Base Path: C:\Program Files\dotnet\sdk\3.1.101\

Host (useful for support):
Version: 3.1.1
Commit: a1388f194c

.NET Core SDKs installed:
2.1.801 [C:\Program Files\dotnet\sdk]
2.2.401 [C:\Program Files\dotnet\sdk]
3.0.100 [C:\Program Files\dotnet\sdk]
3.1.101 [C:\Program Files\dotnet\sdk]

.NET Core runtimes installed:
Microsoft.AspNetCore.All 2.1.12 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.All 2.1.15 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.All 2.2.6 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.App 2.1.12 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 2.1.15 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 2.2.6 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 3.0.0 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 3.1.1 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.NETCore.App 2.1.12 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 2.1.15 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 2.2.6 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 3.0.0 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 3.1.1 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.WindowsDesktop.App 3.0.0 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 3.1.1 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

To install additional .NET Core runtimes or SDKs:
https://aka.ms/dotnet-download
```

- The IDE (VS / VS Code/ VS4Mac) you're running on, and it's version

```
Microsoft Visual Studio Enterprise 2019
Version 16.4.4
VisualStudio.16.Release/16.4.4+29728.190
Microsoft .NET Framework
Version 4.8.03752

Installed Version: Enterprise

ASP.NET and Web Tools 2019 16.4.460.23317
ASP.NET and Web Tools 2019

ASP.NET Web Frameworks and Tools 2019 16.4.460.23317
For additional information, visit https://www.asp.net/

Azure App Service Tools v3.0.0 16.4.460.23317
Azure App Service Tools v3.0.0

C# Tools 3.4.1-beta4-19614-01+165046097562cfe65b09c2e9a9d8f7cd88526f2c
C# components used in the IDE. Depending on your project type and settings, a different version of the compiler may be used.

Common Azure Tools 1.10
Provides common services for use by Azure Mobile Services and Microsoft Azure Tools.

Extensibility Message Bus 1.2.0 (d16-2@8b56e20)
Provides common messaging-based MEF services for loosely coupled Visual Studio extension components communication and integration.

IntelliCode Extension 1.0
IntelliCode Visual Studio Extension Detailed Info

Microsoft Continuous Delivery Tools for Visual Studio 0.4
Simplifying the configuration of Azure DevOps pipelines from within the Visual Studio IDE.

Microsoft JVM Debugger 1.0
Provides support for connecting the Visual Studio debugger to JDWP compatible Java Virtual Machines

Microsoft Library Manager 2.0.87+gbb515bf382
Install client-side libraries easily to any web project

Microsoft MI-Based Debugger 1.0
Provides support for connecting Visual Studio to MI compatible debuggers

Microsoft Visual Studio Tools for Containers 1.1
Develop, run, validate your ASP.NET Core applications in the target environment. F5 your application directly into a container with debugging, or CTRL + F5 to edit & refresh your app without having to rebuild the container.

Mono Debugging for Visual Studio 16.5.24 (1fafd7e)
Support for debugging Mono processes with Visual Studio.

Node.js Tools 1.5.11023.1 Commit Hash:579896f0984848d17d080c8a1c3ddff98d5ba96f
Adds support for developing and debugging Node.js apps in Visual Studio

NuGet Package Manager 5.4.0
NuGet Package Manager in Visual Studio. For more information about NuGet, visit https://docs.nuget.org/

Open Command Line 2.4.226
2.4.226

ProjectServicesPackage Extension 1.0
ProjectServicesPackage Visual Studio Extension Detailed Info

SQL Server Data Tools 16.0.61912.09160
Microsoft SQL Server Data Tools

TypeScript Tools 16.0.11031.2001
TypeScript Tools for Microsoft Visual Studio

Visual Basic Tools 3.4.1-beta4-19614-01+165046097562cfe65b09c2e9a9d8f7cd88526f2c
Visual Basic components used in the IDE. Depending on your project type and settings, a different version of the compiler may be used.

Visual F# Tools 10.4 for F# 4.6 16.4.0-beta.19556.5+e7597deb7042710a7142bdccabd6f92b0840d354
Microsoft Visual F# Tools 10.4 for F# 4.6

Visual Studio Code Debug Adapter Host Package 1.0
Interop layer for hosting Visual Studio Code debug adapters in Visual Studio

Visual Studio Container Tools Extensions (Preview) 1.0
View, manage, and diagnose containers within Visual Studio.

Visual Studio Tools for Containers 1.0
Visual Studio Tools for Containers

VisualStudio.DeviceLog 1.0
Information about my package

VisualStudio.Foo 1.0
Information about my package

VisualStudio.Mac 1.0
Mac Extension for Visual Studio

Xamarin 16.4.000.309 (d16-4@1d551f9)
Visual Studio extension to enable development for Xamarin.iOS and Xamarin.Android.

Xamarin Designer 16.4.0.475 (remotes/origin/d16-4@ac250f5aa)
Visual Studio extension to enable Xamarin Designer tools in Visual Studio.

Xamarin Templates 16.4.25 (579ee62)
Templates for building iOS, Android, and Windows apps with Xamarin and Xamarin.Forms.

Xamarin.Android SDK 10.1.3.7 (d16-4/d66aed0)
Xamarin.Android Reference Assemblies and MSBuild support.
Mono: fd9f379
Java.Interop: xamarin/java.interop/d16-4@c4e569f
ProGuard: xamarin/proguard/master@905836d
SQLite: xamarin/sqlite/3.28.0@46204c4
Xamarin.Android Tools: xamarin/xamarin-android-tools/master@9f4ed4b

Xamarin.iOS and Xamarin.Mac SDK 13.10.0.17 (5f802ef)
Xamarin.iOS and Xamarin.Mac Reference Assemblies and MSBuild support.
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.