openlibrary
openlibrary copied to clipboard
Add `HTML` validation and remove `jQuery` validation from registration form
Dependency to epic
#7694. Sub-task of #9205.
Describe the problem that you'd like solved
While the new real-time validation for formatting errors added in #2055 shows very helpful errors to the user, it does not actually prevent users from submitting forms with badly formatted inputs.
Proposal & Constraints
While in most cases, this problem could be solved speedily by adding relevant HTML attributes to the inputs, this particular form is generated via the forms library in form.py
:
In the HTML:
https://github.com/internetarchive/openlibrary/blob/ca46cbfe87af6e81dabc966baa5b75c827097879/openlibrary/templates/account/create.html#L53-L61
In the Python:
https://github.com/internetarchive/openlibrary/blob/ca46cbfe87af6e81dabc966baa5b75c827097879/openlibrary/plugins/upstream/forms.py#L74-L82):
However, luckily it is fairly straightforward to add any desired HTML attributes to the attribute list above, which translate to the correct attributes in the final rendered HTML.
One other issue here, which we also encountered in #8871, is that the jQuery validate
plugin, called via the validate
class in the form, starts adding extra error messages to the email field on key-up.
Since the validate
class has no other effect on the form, as validation is handled by init_realtime_validation
and forms.py
validators, I propose removing it.
Additional context
- Form library: utils/form.py
- Registration form set-up: plugins/upstream/forms.py
- Registration form HTML: templates/account/create.html
Stakeholders
@cdrini