Add debounced keyup validation to registration inputs, and loading behavior to submit button

[rebecca-shoptaw]

Dependency to epic #7694. Sub-task of #9315.

Problem

A couple more planned UX tweaks to further improve the registration form on two fronts:

1. The form can take a little while to submit depending on internet connection and we definitely don't want to allow double-submits, so we'll need a disable/loading indicator for the submit button
2. When a user has an invalid input they may expect the error message to disappear as soon as the input is fixed, and may be confused when it doesn't, so we could use a (debounced) on-keyup call to the validation functions just for invalid inputs

Expected behavior / screenshots

• When the form is submitted, the submit button is disabled and the text replaced with Loading... while the on-submit checks run
• When a user makes changes to an empty or already-valid input, the validation only happens on click away (blur)
• When a user makes changes to an already-invalid input, the validation happens on key up

Proposal & Constraints

What is the proposed solution / implementation?

1. Use jQuery in realtime_account_validation.js to simply disable and modify the text of the Submit button using the same approach as Disable cover upload submit button while uploading #8754.
2. Use debounce and a keyup listener to each invalid input in realtime_account_validation.js

Leads

Related files

realtime_account_validation.js

Stakeholders

@mekarpeles @cdrini

---

Instructions for Contributors

• Please run these commands to ensure your repository is up to date before creating a new branch to work on this issue and each time after pushing code to Github, because the pre-commit bot may add commits to your PRs upstream.