educator front-end form validation

ekip/everykid/static/css/style.css

@@ -262,7 +262,7 @@ ul.top-links {
     position: absolute; }
 
 .errors {
-  padding: 10px 0;
+  padding: 15px 0;
   color: #ff0000; }
 
 #student-pass .content ul,
@@ -965,10 +965,12 @@ ul.top-links {
     #educators form li .zipcode {
       max-width: 100px;
       float: right; }
-    #educators form li .error input, #educators form li .error select {
-      border: 1px solid red; }
-    #educators form li .error.org_or_school {
-      border: 1px solid red; }
+    #educators form li .error {
+      color: #ff0000; }
+      #educators form li .error input, #educators form li .error select {
+        border: 1px solid red; }
+      #educators form li .error.org_or_school {
+        border: none; }
   #educators form button {
     color: #fff;
     letter-spacing: 1px;

ekip/everykid/static/js/script.js

@@ -1,6 +1,12 @@
 $(function () {
   'use strict';
 
+  function emailValidation(email) {
+    var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
+    return re.test(email);
+  }
+
+
   $('.lets-go, .educator-begin, .lets-get-going, .about-more, .parents-more').click(function(e) {
 
     e.preventDefault();
@@ -51,6 +57,87 @@ $(function () {
 
   }
 
+
+  // educator form error checking
+  $('#educators button[type="submit"]').click(function(e) {
+
+    e.preventDefault();
+
+    var formErrors = false;
+
+    // check text fields
+    $('#educators input[type="text"]').each(function() {
+
+      if($(this).val() == '' && $(this).attr('id') !== 'formtools_address_line_2') {
+
+        $(this).parent().addClass('error');
+
+        formErrors = true;
+      }
+      else {
+        $(this).parent().removeClass('error');
+      }
+    });
+
+
+    // validate email
+    if(!emailValidation($('#formtools_work_email').val())) {
+
+      $('.work_email').addClass('error');
+
+      formErors = true;
+    }
+    else {
+      $('.work_email').removeClass('error');
+    }
+
+
+    // check radio inputs
+    if(!$('#formtools_org_or_school_0').is(':checked') && !$('#formtools_org_or_school_1').is(':checked')) {
+
+      $('.org_or_school').addClass('error');
+
+      formErrors = true;
+    }
+    else {
+      $('.org_or_school').removeClass('error');
+    }
+
+
+    // check dropdown
+    if(!$("select option:selected").val()) {
+      $('.state').addClass('error');
+
+      formErrors = true;
+    }
+    else {
+      $('.state').removeClass('error');
+    }
+
+
+    // check number input
+    if(!$('#educators input[type="number"]').val()) {
+      $('.num_students').addClass('error');
+
+      formErrors = true;
+    }
+    else {
+      $('.num_students').removeClass('error');
+    }
+
+    if(formErrors) {
+
+      $('.errors').remove();
+
+      $('form').prepend('<div class="errors">Please correctly fill out the highlighted fields below:</div>');
+    }
+    else {
+      $('#educators form').submit();
+    }
+
+  });
+
+
   // educator form (back to edit)
   $('#educators .back').click(function() {
 

ekip/everykid/static/scss/_educators.scss

@@ -215,12 +215,14 @@
       }
 
       .error {
+        color: #ff0000;
+
         input, select {
           border: 1px solid red;
         }
 
         &.org_or_school {
-          border: 1px solid red;
+          border: none;
         }
       }
     }

ekip/everykid/static/scss/style.scss

@@ -187,7 +187,7 @@ button {
 }
 
 .errors {
-  padding: 10px 0;
+  padding: 15px 0;
   color: #ff0000;
 }
 

ekip/everykid/templates/get-your-pass/educator_form.html

@@ -1,6 +1,6 @@
     {% if form.errors %}
       <div class="errors">
-        Please correctly fill out the fields below:
+        Please correctly fill out the highlighted fields below:
       </div>
     {% endif %}