Epic in-progress: validation overhaul for registration form

[rebecca-shoptaw]

Feature/refactor. Adds extensive pre-submit validation to the registration form, showing error messages and preventing submission in the event of badly formatted or already-taken entries.

Note: Several of the tasks for this project are distributed among different issues, as noted in the checklist below, but the full project overview/checklist will be maintained here for simplicity.

Full Project Checklist

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
    • Draft solution ready to submit as a PR linked to Add real-time validation for emails/screennames taken on IA to prevent random digit appending #7080, pending fine-tuning and Docker testing which is blocked by 9190
  • If a screenname taken on IA is entered, error should appear before form submit
    • Draft solution ready to submit as a PR linked to Add real-time validation for emails/screennames taken on IA to prevent random digit appending #7080, pending fine-tuning and Docker testing which is blocked by 9190
  • 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, currently blocked by 9190 & 9203
• 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 in this 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 review/approval -- will be part of this PR
  • Add js behavior to prevent submission (not just show an error msg) if backend checks like existing email address fail
    • In progress in this branch
  • Remove any remaining backend validation duplicated by new HTML 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 this project branch via built-in HTML required attribute

Fun possibilities

• Generate username suggestions using the existing function that appends digits in the backend
• 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 formatting checks out of account.py API endpoint and into realtime_account_validation.js to avoid unnecessary API calls
  • To be fixed by Move registration field formatting checks from backend -> frontend #9203 , currently blocked by 9190

Technical

To avoid duplication and merge conflicts, the current changes in this branch are limited to:

1. Adding HTML validation to prevent bad form submission (via extra attributes in forms.py and a new class in form.py)
2. Adding email spamchecks currently only used after form submission to the pre-submission checks (so that, for instance, an error message will show if an email provider is not recognized)

Testing

Testing is currently (mostly) blocked by #9190, which will fix the realtime error-rendering bug.
In the meantime, the HTML validation can still be tested like so:

1. Log out (if logged in)
2. Go to the sign up page
3. Enter a badly formatted email address, password or screenname, or leave one of the inputs empty
4. Attempt to submit the form -- you should get an error message and be unable to submit

Screenshot

[To be added]

Stakeholders

@cdrini

[rebecca-shoptaw]

Transferring task list to #7694 and fixes to separate sub-issues.