Add Real-Time Validation to Account Registration Form

[mekarpeles]

Dependency to epic #7694

Considerations

UX side note: don't show negative feedback while a user is typing (don’t debounce during typing, instead show after e.g. tab out / defocus)

Requirements

• Fix real-time username/email formatting and OL availability validation #9189
  • PR: Fix real-time email/username validation + DRY jQuery error rendering for registration form #9190
• Implement real-time password validation for the registration form  #9165
  • PR: Redo password validation for registration form #9215
• Add real-time validation for emails/screennames taken on IA to prevent random digit appending #7080
  • PR: Add pre-registration validation for IA email and username #9223
• Detect + when validating emails for registration #9325
  • PR: Update email regexes to detect + #9326

Is your feature request related to a problem? Please describe.

Add real-time, client-side validation for email, username, and password to the account registration form.

Describe the solution you'd like

User should see feedback that:

• Email is unavailable on IA/OL
• Username is already taken on IA/OL
• Email, username and/or password is incorrectly formatted

Proposal & Constraints

Please try to use existing components as much as possible (minimize css changes)

[xayhewalo]

Labeling this backlogged since it doesn't look like it's been worked on since May. Let me know your thoughts @mekarpeles

[rebecca-shoptaw]

👍🚀

[rebecca-shoptaw]

Status update!

It's been great working on this project today, and I've got a good amount of progress to report so far.

For the sake of simplicity, I'll make and keep updating a checklist re: what we would like the form to do here:

Required form behavior / tasks

• If all fields are entered, we shouldn’t show an error that says “all fields required”
  • In progress in issue On account create page “Each field is required” msg should disappear if on submit all fields have values #9106
• Error validation should happen before submit
  • Refactor/streamline of error rendering process
    • Fixed by Fix real-time email/username validation + DRY jQuery error rendering for registration form #9190
  • If a badly formatted or already-taken (by OL) email is entered, the error should appear before form submit
    • Fixed by Fix real-time email/username validation + DRY jQuery error rendering for registration form #9190
    • Also moved other email checks from forms.py such as the spam check into the realtime validation process
  • If a badly formatted or already-taken (by OL) username is entered, the error should appear before form submit
    • Fixed by Fix real-time email/username validation + DRY jQuery error rendering for registration form #9190
  • If an email taken on IA is entered, error should appear before form submit
    • Fixed by main project branch, pending Docker testing
  • If a screenname taken on IA is entered, error should appear before form submit
    • Pending investigation of how to check this
  • If a badly formatted password is entered, the error should appear before form submit
    • To be fixed by Implement real-time password validation for the registration form  #9165
• Bad form submission should be stopped from the frontend side
  • Add type="email", required, and regex pattern attributes to form inputs to prevent bad submission
    • Fixed by main project branch by adding attributes to forms.py and a new form class to form.py
  • Remove validate class from form if possible to avoid showing duplicate error messages as a result of HTML validation
    • Pending approval
  • Add js behavior to prevent submission (not just show an error msg) if backend checks like existing email address fail
    • In progress in main project branch
  • Remove remaining backend validation
    • Pending review/approval
• Fix up any weird styling that occurs as a result of the changes
• Final overall cleanup of unused validation methods

Other Requirements

• We need to communicate that screen name is public
  • Already done, if a little inelegantly
• Clicking submit/pressing enter, any empty fields will be highlighted red, and the error text next to the field will say “This field is required”
  • Fixed in main project branch via built-in HTML required attribute

Fun possibilities

• Generate username suggestions using whatever function appends digits in the backend
• Add keyup checks to remove error message as soon as the input is fixed (but not apply the error message on key up, see UX side-note in original issue)
• Disable submit button until all inputs are entered
• Do some kind of animation then check mark or x to indicate whether username is available (a very common and nice thing in forms)
• Move some formatting checks out of the backend