javiercn
commented
4 years ago @ryanelian thanks for contacting us.
@SteveSandersonMS do you have any thoughts on this? Is there a way to achieve this with the current model?
Open ryanelian opened 4 years ago
javiercn
commented
4 years ago @ryanelian thanks for contacting us.
@SteveSandersonMS do you have any thoughts on this? Is there a way to achieve this with the current model?
ryanelian
commented
4 years ago And oh, can we change the "valid" and "invalid" field input CSS class to use Bootstrap's "is-valid" and "is-invalid" classes?
That way we can have some pretty slick form styling with the default shipped Bootstrap CSS:
boukenka
commented
4 years ago I hope @SteveSandersonMS will have an opportunity to have a look at it. 😄 It's part for me of 'Create a great UX with Blazor' from the .NET Conference : Focus on Blazor.
aarondcoleman
commented
4 years ago want to echo @ryanelian on the is-invalid / is-valid for css. Just traced this down why my bootstrap theme doesn't work with blazor and ugh, it's just a missing is-* 😫
DjeeBay
commented
4 years ago Since .valid / .invalid is hard coded in Microsoft.AspNetCore.Components.Forms.EditContextFieldClassExtensions one could just edit the app.css to apply the Bootstrap styles :
.valid.modified:not([type=checkbox]) {
/*outline: 1px solid #26b050;*/
border-color: #28a745;
padding-right: calc(1.5em + .75rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: center right calc(.375em + .1875rem);
background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
.invalid {
/*outline: 1px solid red;*/
border-color: #dc3545;
padding-right: calc(1.5em + .75rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
background-repeat: no-repeat;
background-position: center right calc(.375em + .1875rem);
background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
ghost
commented
4 years ago 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.
TanvirArjel
commented
3 years ago I have tested that the following would fix the issue:
public static string FieldCssClass(this EditContext editContext, in FieldIdentifier fieldIdentifier)
{
if (editContext == null)
{
throw new ArgumentNullException(nameof(editContext));
}
var isValid = !editContext.GetValidationMessages(fieldIdentifier).Any();
if (editContext.IsModified(fieldIdentifier))
{
return isValid ? "modified valid" : "modified invalid";
}
return isValid ? string.Empty : "invalid";
}@mkArtakMSFT @javiercn Can I make a pull request, please?
daver77
commented
2 years ago I still see this issue in .NET 6.0, is there a work-around?
mkArtakMSFT
commented
2 years ago It looks like there have been some improvements in this area done already. Specifically, we now have the FieldCssClassProvider API (documented here, which allows detailed customization.
Would you mind sharing your thoughts regarding whether this API covering your scenarios or not?
Baklap4
commented
1 year ago It looks like there have been some improvements in this area done already. Specifically, we now have the FieldCssClassProvider API (documented here, which allows detailed customization. Would you mind sharing your thoughts regarding whether this API covering your scenarios or not?
This fixes one of the mentioned problems: using another css class name for the different states (valid/invalid)
The OP asked to not have either valid or invalid css class if the form hasn't been touched.
So no this does not cover the initial bug report. It is still the case in latest blazor.
Original statement was:
Blazor sets
validCSS to all form fields BEFORE they are validated in the first place!
<EditForm Model="MyForm">
<InputText @bind-Value="MyForm.MyField"></InputText>
</EditForm>Then witness in the inspect element browser window that
image valid CSS is applied before the form is even touched.
Without touching the form there shouldn't be a valid class on the fields.
ghost
commented
10 months ago 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.
ghost
commented
9 months ago 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.
Describe the bug
Directly quoting from Bootstrap 4 Form Validation guidelines: https://getbootstrap.com/docs/4.4/components/forms/#validation
Contrary to that pattern / advice, Blazor sets
validCSS to all form fields BEFORE they are validated in the first place!Unfortunately the
modifiedCSS is also not helpful because it is not applied when the entire form is validated through submission / submit button. (We can't do.modified.validCSS 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
validCSS to the field should be counted as bug...If fixing this bug is not going to happen, maybe add this method to
EditContextso I can roll my own field CSS method?To Reproduce
Then witness in the inspect element browser window that
validCSS is applied before the form is even touched.Further technical details
dotnet --info