Add HTML validation to registration form

openlibrary/plugins/openlibrary/js/index.js

@@ -199,7 +199,7 @@ jQuery(function () {
     }
 
     // conditionally load real time signup functionality based on class in the page
-    if (document.getElementsByClassName('olform create validate').length) {
+    if (document.querySelector('form[name=signup]')) {
         import(/* webpackChunkName: "realtime-account-validation" */'./realtime_account_validation.js')
             .then(module => module.initRealTimeValidation());
     }

openlibrary/plugins/openlibrary/js/realtime_account_validation.js

@@ -1,11 +1,14 @@
 export function initRealTimeValidation() {
-    const i18nStrings = JSON.parse(document.querySelector('form[name="signup"]').dataset.i18n);
+    const signupForm = document.querySelector('form[name=signup]');
+    const i18nStrings = JSON.parse(signupForm.dataset.i18n);
 
     if (window.grecaptcha) {
         // Callback that is called when grecaptcha.execute() is successful
+        // Checks whether reportValidity exists for cross-browser compatibility
         function submitCreateAccountForm() {
-            const signupForm = document.querySelector('form[name=signup]')
-            signupForm.submit()
+            if (!signupForm.reportValidity || signupForm.reportValidity()) {
+                signupForm.submit();
+            }
         }
         window.submitCreateAccountForm = submitCreateAccountForm
     }

openlibrary/plugins/upstream/forms.py

@@ -6,6 +6,7 @@
 from openlibrary.utils.form import (
     Form,
     Textbox,
+    Email,
     Password,
     Checkbox,
     Hidden,
@@ -54,7 +55,7 @@ def find_ia_account(email=None):
 )
 
 vlogin = RegexpValidator(
-    r"^[A-Za-z0-9-_]{3,20}$", _('Must be between 3 and 20 letters and numbers')
+    r"^[A-Za-z0-9\-_]{3,20}$", _('Must be between 3 and 20 letters and numbers')
 )
 vpass = RegexpValidator(r".{3,20}", _('Must be between 3 and 20 characters'))
 vemail = RegexpValidator(r".*@.*", _("Must be a valid email address"))
@@ -73,11 +74,12 @@ def valid(self, value):
 
 class RegisterForm(Form):
     INPUTS = [
-        Textbox(
+        Email(
             'email',
             description=_('Your email address'),
             klass='required',
             id='emailAddr',
+            required="true",
             validators=[
                 vemail,
                 email_not_already_used,
@@ -95,12 +97,18 @@ class RegisterForm(Form):
             help=_("Letters and numbers only please, and at least 3 characters."),
             autocapitalize="off",
             validators=[vlogin, username_validator],
+            pattern=vlogin.rexp.pattern,
+            title=vlogin.msg,
+            required="true",
         ),
         Password(
             'password',
             description=_('Choose a password'),
             klass='required',
             validators=[vpass],
+            minlength="3",
+            maxlength="20",
+            required="true",
         ),
         Checkbox(
             'ia_newsletter',

openlibrary/templates/account/create.html

@@ -50,7 +50,7 @@ <h1>$_("Sign Up")</h1>
     <p>$:_("You are already logged into Open Library as %(user)s.", user=str(user_link()))</p>
     <p>$:_('If you\'d like to create a new, different Open Library account, you\'ll need to <a href="javascript:;" onclick="document.forms[\'hamburger-logout\'].submit()">log out</a> and start the signup process afresh.')</p>
 $else:
-    <form class="olform create validate" name="signup" method="post" data-i18n="$json_encode(i18n_strings)" action="">
+    <form class="olform create" name="signup" method="post" data-i18n="$json_encode(i18n_strings)" action="">
         $if form.note:
             <div class="note">$form.note</div>
 

openlibrary/utils/form.py

@@ -97,6 +97,17 @@ def get_type(self):
         return "password"
 
 
+class Email(Input):
+    """Email input.
+
+    >>> Email("email", value='joe@archive.org').render()
+    '<input type="email" id="email" value="joe@archive.org" name="email" />'
+    """
+
+    def get_type(self):
+        return "email"
+
+
 class Checkbox(Input):
     """Checkbox input."""