The Wayback Machine - https://web.archive.org/web/20220604160434/https://github.com/dotnet/aspnetcore/issues/8573
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Design a better client side validation experience #8573

Open
2 tasks
danroth27 opened this issue Mar 15, 2019 · 16 comments
Open
2 tasks

Design a better client side validation experience #8573

danroth27 opened this issue Mar 15, 2019 · 16 comments
Labels
affected-medium area-mvc enhancement feature-mvc-razor-views Priority:1 severity-major triaged

Comments

@danroth27
Copy link
Member

@danroth27 danroth27 commented Mar 15, 2019

#8573 (comment) covers the problem statement for this issue


Bootstrap 5 is removing it's dependency on jQuery: twbs/bootstrap#23586

This issue tracks investigating what removing jQuery as a dependency from ASP.NET Core would take.

We're going to split this work into two phases:

  1. Design the new JS library to replace jquery-validation-unobstrusive
  2. Implement the above
@muratg muratg added the area-mvc label Mar 15, 2019
@mkArtakMSFT
Copy link
Contributor

@mkArtakMSFT mkArtakMSFT commented Mar 19, 2019

@ryanbrandenburg can you please investigate and come up with some cost for this work? Thanks!

@mkArtakMSFT mkArtakMSFT added the enhancement label Mar 19, 2019
@mkArtakMSFT
Copy link
Contributor

@mkArtakMSFT mkArtakMSFT commented Mar 26, 2019

@danroth27 seems we rely on jQuery for our validation too, it's not just transitive because of Bootstrap dependency.

@danroth27
Copy link
Member Author

@danroth27 danroth27 commented Mar 26, 2019

@mkArtakMSFT Right, the main work item tracked by this issue is investigating what it would take to remove the jQuery dependency from our validation support.

@danroth27
Copy link
Member Author

@danroth27 danroth27 commented Mar 26, 2019

Given that our current validation support is built on jQuery validation, the way I would think about this issue is to take a fresh look at what our client validation support should look like. Is there a different validation library that we should consider using? Etc.

@mkArtakMSFT mkArtakMSFT added this to the Backlog milestone Apr 4, 2019
@ryanbrandenburg ryanbrandenburg removed this from the Backlog milestone Apr 8, 2019
@ryanbrandenburg ryanbrandenburg added this to the 3.0.0-preview5 milestone Apr 8, 2019
@ryanbrandenburg ryanbrandenburg added the Working label Apr 8, 2019
@ryanbrandenburg
Copy link
Member

@ryanbrandenburg ryanbrandenburg commented Apr 8, 2019

The one option that seems to be most popular (and standards compliant) would be using the built-in HTML5 form validation. The problem there is that it would only work for client-side validation. As far as I can tell HTML5 form validation doesn't solve any server-side validation problems, and even if it did it would require a lot of changes to DataAnnotations. HTML5 also isn't supported on older browsers (IE9 was the example I found).

In my opinion it's not worth the work that would be required to remove our dependencies here in the absence of a more unified vision about what value we can produce from re-working DataAnnotations.

@ryanbrandenburg ryanbrandenburg removed this from the 3.0.0-preview5 milestone Apr 8, 2019
@ryanbrandenburg ryanbrandenburg added this to the Backlog milestone Apr 8, 2019
@ryanbrandenburg ryanbrandenburg added 1 - Ready and removed Working labels Apr 8, 2019
@ryanbrandenburg ryanbrandenburg removed their assignment Apr 8, 2019
@mkArtakMSFT mkArtakMSFT removed this from the Backlog milestone Jan 21, 2020
@mkArtakMSFT mkArtakMSFT added this to the Next sprint planning milestone Jan 21, 2020
@mkArtakMSFT mkArtakMSFT added cost: L and removed cost: S labels Feb 13, 2020
@mkArtakMSFT mkArtakMSFT removed this from the Next sprint planning milestone May 26, 2020
@mkArtakMSFT mkArtakMSFT added this to the Backlog milestone May 26, 2020
@mkArtakMSFT mkArtakMSFT added this to the 6.0-preview4 milestone Mar 11, 2021
@mkArtakMSFT mkArtakMSFT moved this from Preview 3 (19th Mar) to 6.0-Preview4 in ASP.NET Core Blazor & MVC 6.0 Mar 11, 2021
@mkArtakMSFT mkArtakMSFT removed this from the 6.0-preview4 milestone Apr 1, 2021
@mkArtakMSFT mkArtakMSFT added this to the 6.0-preview5 milestone Apr 1, 2021
@mkArtakMSFT mkArtakMSFT moved this from 6.0-Preview4 (16th April) to 6.0-preview5 in ASP.NET Core Blazor & MVC 6.0 Apr 1, 2021
@javiercn javiercn added the feature-mvc-razor-views label Apr 18, 2021
@pranavkm pranavkm removed this from the 6.0-preview5 milestone May 11, 2021
@pranavkm pranavkm added this to the 6.0-preview6 milestone May 11, 2021
@pranavkm pranavkm moved this from 6.0-preview5 (CC: 16th May) to 6.0-preview6 (CC: 15th June) in ASP.NET Core Blazor & MVC 6.0 May 11, 2021
@pranavkm pranavkm removed their assignment Jun 3, 2021
@pranavkm pranavkm removed this from 6.0-preview6 (CC: 15th June) in ASP.NET Core Blazor & MVC 6.0 Jun 3, 2021
@pranavkm pranavkm removed this from the 6.0-preview6 milestone Jun 3, 2021
@pranavkm pranavkm added this to the Backlog milestone Jun 3, 2021
@msftbot
Copy link
Contributor

@msftbot msftbot bot commented Jun 3, 2021

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.

@pranavkm
Copy link
Contributor

@pranavkm pranavkm commented Jun 3, 2021

Moving this out of 6.0. The initial thought was that we could do something tactical building upon either browser features such as constraint validation or hand rolling a facsimile of jQuery.validation. But on further inspection, we realize that an alternative that simply removes jquery does not move the needle enough for us invest in.

https://github.com/aspnet/specs/blob/main/notes/RemoveJQueryUnobtrusiveValidation.md has some notes about our conversations around this and what we might expect if we were to consider improving this experience:

Offline notes

I think we need to start by defining the goals here, for me those are:

  • Developers should be able to author great forms out of the box without writing JS code.
  • Authoring more advanced forms should be an incremental process, meaning you can add/compose on top of the existing form functionality instead of rewriting the form in its entirety.
  • There should be room for a progressive enhancement story, where you can author a form that can work in the context of a SPA as well as in the context of a plain server rendered app without separate solutions.
    In general, I think we would need to look at several things:
  • Investigate the cost of removing jquery and jquery validate (WITHOUT) accounting for extensibility based on the current set of supported validation rules. Tell people
  • My gut is that the "most complicated" to keep compat with are CreditCard, EmailAddress, Phone, and Url; and I'm not sure they matter that much, for example, Url and EmailAddress perform incredibly dumb validations in .net core (see here) so they are useless. Credit card and phone can easily be converted to equivalent JS validations.
  • For things like numbers, etc. There's good support now for the Intl global that does most of the job for localized comparisons.
    • Investigate/define what experience we want to enable here around forms:
  • Look at great form experiences on the web and identify what makes them great:
    • Placeholders.
    • Autofill (Phone number, credit card info, etc).
    • Validation on input/focus out.
    • Input states.
    • Dynamism (new form sections rendering in response to changes, multi-step forms/wizards, etc.)
    • Form reset.
  • Identify the end-to-end scenarios for forms that we care about:
    • Vanilla MVC/Razor pages app.
    • MVC app + JS Islands.
    • MVC + SPA framework.
    • MVC + Blazor
    • Blazor.
  • Identify the progressions/cut-offs for each transition:
    • What should you be able to do out of the box without writing any JS*
    • What should you be able to do with vanilla JS (no framework involved)
    • When would you need to switch to a full-blown SPA framework*
    • When you need to switch to a new approach,
    • How big are the changes you need to make*
    • Are there things from the implementation you can reuse*
    • Investigate what modern browser standards we can leverage to offer a better experience:
  • Can we use the built-in HTML5 validation mechanism to implement the validation rules*
  • Can we encapsulate the validation primitives in web components in a way that they can be reused across different parts of the stack and with other UI frameworks*
  • What other modern HTML5 features we can leverage to offer a more complete out of the box forms experience*

@pranavkm pranavkm changed the title Investigate removing jQuery dependency Design a better client side validation experience Jun 3, 2021
@Andrzej-W
Copy link

@Andrzej-W Andrzej-W commented Jun 3, 2021

@pranavkm
Copy link
Contributor

@pranavkm pranavkm commented Jun 7, 2021

Sorry @Andrzej-W that repo is non-public, but I've updated my comment with details about what we would want from a re-design.

@jerriep
Copy link

@jerriep jerriep commented Jun 8, 2021

@pranavkm Thanks for posting those notes. I am eager to see what you can come up with in a future version

@pranavkm pranavkm removed this from the Backlog milestone Oct 19, 2021
@pranavkm pranavkm added this to the .NET 7 Planning milestone Oct 19, 2021
@pranavkm pranavkm added the Priority:0 label Oct 28, 2021
@mkArtakMSFT mkArtakMSFT added Priority:1 triaged and removed Priority:0 labels Nov 5, 2021
@javiercn
Copy link
Member

@javiercn javiercn commented May 19, 2022

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
affected-medium area-mvc enhancement feature-mvc-razor-views Priority:1 severity-major triaged
Projects
None yet
Development

No branches or pull requests

9 participants