Add HTML validation to registration form

[rebecca-shoptaw]

Closes #9244.

Feature. Adds HTML attributes to registration form inputs to prevent submission with improperly formatted data.

Technical

Implementation involved removing validate class to prevent duplicated realtime validation, and adding appropriate attributes to inputs in forms.py. Also involved triggering the HTML validation manually before the grecaptcha process, a strategy that will likely be re-used/expanded for part 2 of #9205.

Testing

1. Log out (if logged in)
2. Hit "Sign Up" or go to /account/create
3. Try entering an improperly formatted password, username or email
4. Ignore the on-screen warning and submit the form
5. Submission should be prevented and you should see an HTML built-in error message pop up next to the first badly formatted input

Screenshot

Stakeholders

@cdrini

[cdrini]

Code looks good, a few opportunities to DRY things. Putting up on testing now for a whirl

[cdrini]

tested on testing.openlibrary.org and I can't seem to get the email html error to appear 🤔

[rebecca-shoptaw]

tested on testing.openlibrary.org and I can't seem to get the email html error to appear 🤔

Update: Fixed! Was a result of grecaptcha blocking the validation. 🙂

[cdrini]

Code lgtm ; we noticed we were having trouble creating an account on testing.openlibrary.org and staging.openlibrary.org ! I didn't test doing a full registration flow on the realtime validation PR that preceded this one, so perhaps something is up there.

Otherwise I tested on FF and the errors were showing up in the right spots! 👍

[cdrini]

Ok! I played around with it a bit more, and it seems like the + emails no longer work! They're treated as already registered by IA. I found a workaround for testing it though, and was able to fully create an account on testing 👍

But it seems like our realtime email validation does not correctly detect this. Would you mind creating an issue to fix this?

[rebecca-shoptaw]

@cdrini sure thing!!