Merge pull request #9607 from rebecca-shoptaw/9605/feature/replace-jq…

…uery-validate-required-class

Replace jQuery `validate` in admin and support forms

openlibrary/templates/admin/people/index.html

@@ -28,8 +28,8 @@ <h2>$_("Find Account")</h2>
     <tr>
         <td>$_("Email Address:")</td>
         <td>
-            <form method="GET" name="form-email" id="form-email" class="validate">
-                <input type="text" name="email" id="email" class="email" value="$email"/>
+            <form method="GET" name="form-email" id="form-email">
+                <input type="email" name="email" id="email" value="$email"/>
                 <button type="submit" name="" value="find">$_("Find")</button>
                 <span class="invalid" htmlfor="email" generated="true">
                     $if email:

openlibrary/templates/admin/people/view.html

@@ -146,8 +146,8 @@ <h1><a class="plain" href="/admin/people">People</a> / $person.username</h1>
     <tr>
         <td>$_("Email Address:")</td>
         <td>
-            <form method="POST" name="form-email" id="form-email" class="validate">
-                <input type="text" name="email" id="email" class="email big" value="$input.get('email', person['email'])"/>
+            <form method="POST" name="form-email" id="form-email">
+                <input type="email" name="email" id="email" class="big" value="$input.get('email', person['email'])"/>
                 <button type="submit" name="action" value="update_email">Change</button>
                 <span class="invalid" htmlfor="email" generated="true">$errors.get("email")</span>
             </form>

openlibrary/templates/support.html

@@ -11,7 +11,7 @@ <h1>$_("How can we help?")</h1>
  $if done:
    <em>$:_('Your question has been sent to our support team. We\'ll get back to you shortly. You can also <a href="https://twitter.com/openlibrary">contact us on Twitter</a>.')</em>
 
- <form action="" method="post" name="spamForm" class="olform validate">
+ <form action="" method="post" name="spamForm" class="olform">
 <p>$:_('Please check our <a href="/help/">Help Pages</a> and <a href="/help/faq">Frequently Asked Questions</a> (FAQ) to see if your question is answered there. Thank you.')</p>
 
  <div class="formElement">
@@ -21,7 +21,7 @@ <h1>$_("How can we help?")</h1>
 
  <div class="formElement">
  <div class="label"><label for="email">$_("Your Email Address")</label></div>
- <div class="input"><input type="email" class="email required" name="email" id="email" value="$email"/> ($_('We\'ll need this if you want a reply'))</div>
+ <div class="input"><input type="email" name="email" id="email" value="$email" required/> ($_('We\'ll need this if you want a reply'))</div>
  <p>$_("If you wish to be contacted by other means, please add your contact preference and details to your question.")</p>
  </div>
 
@@ -36,7 +36,7 @@ <h1>$_("How can we help?")</h1>
    <div class="label"><label for="question">$_("Your Question")</label></div>
    <p><strong>$_("Note: our staff will likely only be able respond in English.")</strong></p>
    <div class="input">
-     <textarea id="question" name="question" class="required" cols="40" rows="5"></textarea>
+     <textarea id="question" name="question" cols="40" rows="5" required></textarea>
    </div>
    <p>$_("If you encounter an error message, please include it. For questions about our books, please provide the title/author or Open Library ID.")</p>
  </div>

static/css/components/form.olform.less

@@ -107,7 +107,8 @@
   input[type=number],
   input[type=text],
   input[type=password],
-  input[type=url] {
+  input[type=url],
+  input[type=email] {
     margin: 0 10px 5px 0;
   }
 

static/css/legacy.less

@@ -495,7 +495,7 @@ textarea {
 }
 
 input {
-  &[type=text] {
+  &[type=text], &[type=email] {
     margin: 0 10px 5px 0;
   }
   &.repeat-add {