Replace all jQuery validate instances with built-in HTML or JS validation

[rebecca-shoptaw]

Problem

As part of an overall reduction of the OL code size to improve site performance, one of the most obvious and easiest targets is jQuery validate, a form validation plugin that can be almost completely duplicated with simpler, faster built-in HTML checks.

Current behavior:

Currently, the plugin is used like so to ensure required inputs are filled, emails are correctly formatted, and the publish date is not more than a year in the future:

openlibrary/openlibrary/plugins/openlibrary/js/validate.js

Lines 7 to 16 in b010f39

	* To enable, add class="validate" to the form and add required validations in class to the input elements.
	* Available validations are: required, email, and publish-date.
	*
	* Example:
	* <form name="create" class="validate">
	* Username: <input type="text" class="required" name="username" value=""/> <br/>
	* E-mail: <input type="text" class="required email" name="username" value=""/> <br/>
	* Password: <input type="text" class="required" name="username" value=""/> <br/>
	* <input type="submit" name="submit" value="Register"/>
	* </form>

Not only is the current implementation inefficient, but it has bizarre, non-user-friendly side-effects. For instance:

• On the /contact page, the required attribute on the "Your Question" field, instead of displaying the desired error message if the form is submitted with an empty question, actually hides the whole question field, making the form impossible to submit:

• If a type="email" is added to an email input in a form using jQuery validate, the plugin adds non-user-friendly and visually awkward on-key-up validation as the user types
• The error messages, such as this one in /add, are located only in the JavaScript, and cannot be translated - which you can verify by searching messages.pot for "Are you sure that"

• All of these validation checks, including very important ones like "required" will not run if the user has JavaScript disabled

Proposal & Constraints

Since in practice jQuery validate is only used for 3 different checks, removing it should be very simple, and involve just:

1. Replacing each instance of class="required" in a jQuery validate form with the HTML required attribute
2. Replacing each instance of class="email" in a jQuery validate form with the HTML type="email" attribute
3. For the publish-date custom validation, which is only used in add.html:
   a. Move the existing publish date validation function into the add-book.js file which handles other JS validation for the form
   b. Add the error message to the HTML so it can be correctly internationalized
   c. Ensure the function fires on the correct input on blur
4. Clean up: Remove the validate class from each relevant form, remove the invocation from index.js, delete validate.js, and uninstall the plugin

Subtasks

• Replace jQuery validate in admin and support forms #9607
• Replace jQuery validate in book/author/tag edit forms #9608
• Replace jQuery validate in book add form #9610
• Remove jQuery validate from codebase #9816

Related files

validate.js
support.html
/admin/people/index.html
/admin/people/view.html
/books/add.html
/books/edit.html
/tag/add.html
/tag/edit.html
/author/edit.html

Stakeholders

@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.