Simplified the client validation

Also add maxlength to the inputs
dvcoders · Oct 19, 2016 · 9dbcab9 · 9dbcab9
1 parent 5a689f7
commit 9dbcab9
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 16 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -15,8 +15,11 @@ input:invalid {
   border-color: #f44336;
 }
 
-#other-error {
+.error {
   color: #f44336;
+}
+
+#other-error {
   display: none;
 }
 

diff --git a/public/javascripts/index.js b/public/javascripts/index.js
@@ -12,20 +12,20 @@ function renderError (el, message) {
 
 $(function () {
   window.addEventListener('submit', function (e) {
-    var requiredMatched = true
     e.preventDefault()
-    var inputs = document.querySelectorAll('input[data-required]')
-    var githubUsername = document.querySelector('#githubUsername')
-    Array.prototype.slice.call(inputs).forEach(function (el) {
-      if (el.getAttribute('pattern') ? !(new RegExp(el.getAttribute('pattern')).test(el.value)) : el.value === '') {
-        e.stopPropagation()
+    var requiredMatched = true
+    var inputs = $('input[data-required]')
+    var githubUsername = $('#githubUsername').get(0)
+
+    inputs.each(function (i, el) {
+      if (!el.checkValidity() || el.value === '') {
         el.setAttribute('required', true)
         requiredMatched = false
+        scrollToElement(form)
       }
     })
 
-    if (githubUsername.value !== '' && !(new RegExp(githubUsername.getAttribute('pattern')).test(githubUsername.value))) {
-      e.stopPropagation()
+    if (githubUsername.value !== '' && !githubUsername.checkValidity()) {
       requiredMatched = false
     }
 

diff --git a/views/index.html b/views/index.html
@@ -21,32 +21,32 @@ <h5>Build cool projects and websites.</h5>
       <div class="row form-row">
         <div class="eight columns offset-by-two">
           <label for="firstName">*First Name</label>
-          <input class="u-full-width" type="text" placeholder="Daniel" name="firstName" id="firstName" pattern="^[a-zA-Z\u00C0-\u017F' -]+$" data-required>
+          <input class="u-full-width" type="text" placeholder="Daniel" name="firstName" id="firstName" pattern="[a-zA-Z\u00C0-\u017F' -]+" maxlength="35" data-required>
         </div>
       </div>
       <div class="row form-row">
         <div class="eight columns offset-by-two">
           <label for="lastName">*Last Name</label>
-          <input class="u-full-width" type="text" placeholder="Awai" name="lastName" id="lastName" pattern="^[a-zA-Z\u00C0-\u017F' -]+$" data-required>
+          <input class="u-full-width" type="text" placeholder="Awai" name="lastName" id="lastName" pattern="[a-zA-Z\u00C0-\u017F' -]+" maxlength="35" data-required>
         </div>
       </div>
       <div class="row form-row">
         <div class="eight columns offset-by-two">
-          <label for="email">*Email<span></span></label>
-          <input class="u-full-width" type="email" placeholder="[email protected]" name="email" id="email" pattern="^[\w.+-]*\w+@[\w-]+(\.[\w-]+)+$" data-required>
+          <label for="email">*Email<span class="error"></span></label>
+          <input class="u-full-width" type="email" placeholder="[email protected]" name="email" id="email" pattern="[\w.+-]*\w+@[\w-]+(\.[\w-]+)+" data-required>
           <label>
             <input type="checkbox" name="mailchimp" id="mailchimp" checked><small> Subscribe to dvcoders mailing list: meeting updates & events</small>
           </label>
         </div>
       </div>
       <div class="row form-row">
         <div class="eight columns offset-by-two">
-          <label for="githubUsername">Github Username<span></span></label>
-          <input class="u-full-width" type="text" placeholder="l33t-h4x0r" id="githubUsername" name="githubUsername" pattern="^[a-zA-Z0-9-]*$">
+          <label for="githubUsername">Github Username<span class="error"></span></label>
+          <input autocapitalize="off" class="u-full-width" type="text" placeholder="l33t-h4x0r" id="githubUsername" name="githubUsername" pattern="[a-zA-Z0-9-]*" maxlength="35">
         </div>
       </div>
       <div class="row form-row">
-        <div class="eight columns offset-by-two" id="other-error"></div>
+        <div class="eight columns offset-by-two error" id="other-error"></div>
       </div>
       <hr>