Add HTML validation to registration form

openlibrary/plugins/upstream/forms.py

@@ -6,6 +6,7 @@
 from openlibrary.utils.form import (
     Form,
     Textbox,
+    Email,
     Password,
     Checkbox,
     Hidden,
@@ -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="[a-zA-Z0-9]{3,20}",
+            title=_("Between 3 and 20 letters and numbers"),
+            required="true",
         ),
         Password(
             'password',
             description=_('Choose a password'),
             klass='required',
             validators=[vpass],
+            minlength="3",
+            maxlength="20",
+            required="true",
         ),
         Checkbox(
             'ia_newsletter',

openlibrary/utils/form.py

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