Updated implementation of email validators

edivorce/apps/core/static/css/main.scss

@@ -231,6 +231,21 @@ img {
 	margin-bottom: 25px;
 }
 
+.form-group input.form-control {
+	border-radius: 10px;
+	border-top-right-radius: 10px;
+	border-bottom-right-radius: 10px;
+	height: inherit;
+	width: inherit;
+	float: inherit;
+	font-size: inherit;
+	padding: 12px 15px;
+	line-height: 1em;
+	&.input-wide {
+		width: 50%;
+	}
+}
+
 
 // Buttons & Icons
 

edivorce/apps/core/static/js/ajax.js

@@ -14,19 +14,16 @@ var ajaxOnChange = function () {
     //}
 
     if (el.is("#email_textbox")){
-        isValid = validateEmail(value);
+        isValid = validateEmail(el);
     }
 
     // special behaviour for radio button with textbox
     radioWithTextboxControl(el);
 
     if (isValid) {
+        value = getValue(el, question);
         ajaxCall(question, value);
     }
-    else{
-        console.log("Invalid input for " + el.prop('name'));
-        window.alert("Invalid input for " + el.prop('name'));
-    }
 };
 
 // Get CSRFToken needed to POST using Ajax

edivorce/apps/core/static/js/controllers.js

@@ -160,6 +160,26 @@ var getValue = function(el, question){
     }
 };
 
+// check if email is in valid format
+var validateEmail = function(el){
+
+    el.closest('.form-group')
+        .removeClass('has-error')
+        .find('span.help-block')
+        .remove();
+
+    var value = el.val();
+    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
+    if (regex.test(value)) {
+        return true;
+    } else {
+        el.closest('.form-group')
+            .addClass('has-error')
+            .append('<span class="help-block">Invalid Email</span>');
+        return false;
+    }
+};
+
 // check if value in date field is in DD/MM/YYYY format
 // and check if it is valid date and it is today or earlier
 var validateDate = function(value){
@@ -192,12 +212,6 @@ var stringToDate = function(value){
     return new Date(y,m-1,d);
 };
 
-// check if email is in valid format
-var validateEmail = function(value){
-    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
-    return regex.test(value);
-};
-
 // check if separation date is less than one year from today
 var checkSeparationDateLessThanYear = function(separationDate){
     // get separation date

edivorce/apps/core/templates/question/09_other_questions.html

@@ -38,8 +38,10 @@
 
         <p><em>Fax number (optional)</em></p>
         {% input_field type="text" name="address_to_send_official_document_fax_you" class="form-block input-wide response-textbox" %}
+        <div class="form-group">
         <p><em>Email Address (optional)</em></p>
-        {% input_field type="text" id="email_textbox" name="address_to_send_official_document_email_you" class="form-block input-wide response-textbox" %}
+        {% input_field type="text" id="email_textbox" name="address_to_send_official_document_email_you" class="form-block input-wide response-textbox form-control" %}
+        </div>
     </div>
 </div>
 
@@ -70,8 +72,10 @@
 
         <p><em>Fax number (optional)</em></p>
         {% input_field type="text" name="address_to_send_official_document_fax_spouse" class="form-block input-wide response-textbox" %}
+        <div class="form-group">
         <p><em>Email Address (optional)</em></p>
-        {% input_field type="text" id="email_textbox" name="address_to_send_official_document_email_spouse" class="form-block input-wide response-textbox" %}
+        {% input_field type="text" id="email_textbox" name="address_to_send_official_document_email_spouse" class="form-block input-wide response-textbox form-control" %}
+        </div>
     </div>
 </div>