Blazor Form Validation Input elements initially rendered with class valid

[AmarjeetBanwait]

Current Behaviour:

• Input elements in form-validation initially getting rendered with "valid" class.

Expected Behaviour:

• Initially element must be rendered with class (eg.) "pristine" if rendered without value

• "valid" class should be applied with "pristine" if element is bound with some initial valid value from model

• "invalid" class should be applied with "pristine" if element is bound with some initial invalid value from model

• Once modified "pristine" class should be replaced with "modified" class along with "valid" or "invalid" class

This problem arising if we replace valid/invalid class names with Bootstrap's is-valid/is-invalid class names using MyFieldClassProvider : FieldCssClassProvider

Another Issue:

• outline css is clashing with "border with radius" in template provided styles

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }

Expected Behaviour:

• All valid/invalid styles should use "border" coloring instead of "outline"

[vertonghenb]

I think I mentioned this before in the PR https://github.com/dotnet/aspnetcore/pull/24835#issuecomment-698009470

[AmarjeetBanwait]

@vertonghenb Yes but I think @SteveSandersonMS missed the case when element will be rendered with initial value.

https://github.com/dotnet/aspnetcore/pull/24835#issuecomment-698965130 will work fine if element is rendered without initial value but .valid without .modified must apply styles if field is rendered with some value So in the PR you mentioned we also need to check if the field has initial value

return (isModified, isValid, hasInitialValue) switch {
             (true, true, true) => "modified valid",        //if modified then no need to check initialValue
             (true, true, false) => "modified valid",       
             (true, false, true) => "modified invalid",
             (true, false, false) => "modified invalid",

             (false, true, true) => "pristine valid",        //if not modified & has initialValue then only valid/invalid class must apply styles
             (false, false, true) => "pristine invalid",

             (false, true, false) => "pristine",       //if not modified & has no initialValue then only pristine is enough
              (false, false, false) => "pristine"      

[mkArtakMSFT]

Thanks for contacting us, @AmarjeetBanwait. Is there any specific issue you're trying to emphasize here? The behavior seems to be inline with our expectations.

[AmarjeetBanwait]

This is the Issue. I am not able to distinguish between an element rendered without value and an element with some initial value. In both cases valid class will be applied without modified. So I need to check if element has value or not eg. editContext.HasValue(fieldIdentifier); From this it will be easy to find that an element has InitialValue or not.

Also It makes no sense to apply valid class to empty element. As described in description above.

[SteveSandersonMS]

Also It makes no sense to apply valid class to empty element

Doesn’t that depend on whether an empty string is allowed for the field?

I am not able to distinguish between an element rendered without value and an element with some initial value

What field type are you thinking of? For an int, .NET doesn’t have any representation for ‘no value’, so you’d need to use a nullable int instead. Then in that case empty string is valid by default, but would be invalid if you marked the field as required.

[AmarjeetBanwait]

Doesn’t that depend on whether an empty string is allowed for the field?

Doesn't empty string should be invalid for a required property. Shouldn't nullable int be invalid initially.

I am already using nullable int and required properties Sample

and every field is valid initially

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[Bonelol]

Same issue here, the intial css class is 'valid'. Is it possible to change EditContext.GetFieldState to public, or we need a method in either EditContext or EditForm to mark fields as modified.

[SteveSandersonMS]

we need a method in either EditContext or EditForm to mark fields as modified

Please see https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.editcontext.notifyfieldchanged?view=aspnetcore-5.0

[wobuzhudao]

Seeing this issue when I have a text-type input that has the required attribute applied. If I clear the text (make it empty), the valid.modified class is applied.

It should apply the invalid class instead (since the textbox is now empty, and the input is required).

[ghost]

Thanks for contacting us.

We're moving this issue to the .NET 9 Planning milestone for future evaluation / consideration. We would like to keep this around to collect more feedback, which can help us with prioritizing this work. We will re-evaluate this issue, during our next planning meeting(s). If we later determine, that the issue has no community involvement, or it's very rare and low-impact issue, we will close it - so that the team can focus on more important and high impact issues. To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

[mkArtakMSFT]

This is a dupe of https://github.com/dotnet/aspnetcore/issues/18884