From 8ee71cad06c93d821067811006424bbddc08b53c Mon Sep 17 00:00:00 2001
From: unknown <nndustriemedia@gmail.com>
Date: Mon, 10 Feb 2014 00:12:48 -0700
Subject: [PATCH 1/3] addded a validate class to and title containing an error
 message for each label in the form.

added .error class to the css to display red border and before content for use with javascript validation.

added two media queries with breakpoints at 960px and 480px
---
 .project        | 11 +++++++++++
 index.html      |  8 ++++----
 styles/main.css | 33 +++++++++++++++++++++++++++++++++
 3 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 .project

diff --git a/.project b/.project
new file mode 100644
index 0000000..01c386b
--- /dev/null
+++ b/.project
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>white_fedtest</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+	</buildSpec>
+	<natures>
+	</natures>
+</projectDescription>
diff --git a/index.html b/index.html
index ad0297d..87a2a9d 100644
--- a/index.html
+++ b/index.html
@@ -13,19 +13,19 @@ <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
       <img class="banner" src="images/banner.jpg" alt="" />
       <form method="post" action="index.html">
         <h2>Nibh Hendrerit Sodales</h2>
-        <label>
+       <label class="validate" title="Please enter your first name">
           First Name:
           <input type="text" name="first_name" />
         </label>
-        <label>
+        <label class="validate" title="Please enter your last name">
           Last Name:
           <input type="text" name="last_name" />
         </label>
-        <label>
+        <label class="validate" title="Please enter a valid phone humber">
           Phone Number:
           <input type="text" name="phone" />
         </label>
-        <label>
+        <label class="validate" title="Please enter a valid email address">
           Email Address:
           <input type="text" name="email" />
         </label>
diff --git a/styles/main.css b/styles/main.css
index 7bb98ad..56ff515 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -56,6 +56,19 @@ input {
   box-sizing: border-box;
 }
 
+.error > input, .error > div{
+     border: 1px solid #FF0000 !important;
+}
+
+.error:before {
+    content: attr(title);
+    position: absolute;
+    right: 20px; 
+    color: #FF0000;
+    font-size: 9px;
+}
+
+
 .actions button {
   width: 100%;
   padding: 10px;
@@ -75,3 +88,23 @@ input {
   padding-left: 20px;
 }
 
+@media only screen 
+and (max-width : 960px) {
+	
+	.container { width: 100%;}
+	.container img{width: 100%;}
+	form{margin-top: -29%;}
+	.content { width: 50%;}
+}
+
+@media only screen 
+and (max-width : 480px) { 
+	
+	body{min-width: 320px; min-height: 480px;}
+	h1{ font-size: 14pt; }
+	form{float: none; margin: -29% auto; width: 250px;}
+	.content {width: 90%; padding: 30% 10px; margin: 0 auto;}
+	.content p{width: 100%;}
+}
+
+

From 03a68d2ae2573ea4e36b3119b0ed24eb2fe097c5 Mon Sep 17 00:00:00 2001
From: unknown <nndustriemedia@gmail.com>
Date: Mon, 10 Feb 2014 00:30:18 -0700
Subject: [PATCH 2/3] added new div element for holding the education
 selections.

created new folder /js and new javascript file main.js

added the jsonp call and update_form function to main.js
 Onload triggers the call to jsonp and send the results to the function update_form, which then iterates through the list of selections, ignoring the option for "some college" and inserts them into the new "education" div element.
---
 index.html      |  9 +++++++++
 js/main.js      | 23 +++++++++++++++++++++++
 styles/main.css | 13 +++++++++++++
 3 files changed, 45 insertions(+)
 create mode 100644 js/main.js

diff --git a/index.html b/index.html
index 87a2a9d..91d564a 100644
--- a/index.html
+++ b/index.html
@@ -29,6 +29,14 @@ <h2>Nibh Hendrerit Sodales</h2>
           Email Address:
           <input type="text" name="email" />
         </label>
+         <div>
+          	<label class="validate" title="Please enter a valid email address">
+          	  Education Level:
+	          	<div id="education">
+	          		
+	          	</div>	
+          	</label>
+        </div>
         <div class="actions">
           <button type="submit">Request Information</button>
         </div>
@@ -47,5 +55,6 @@ <h2>Nibh Hendrerit Sodales</h2>
         </p>
       </div>
     </div>
+    <script type="text/javascript" src="js/main.js"></script>
   </body>
 </html>
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..993e24d
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,23 @@
+function update_form (data) {
+var edu = document.getElementById("education");
+  for(var key in data){
+  	 if (key !== 'some') {
+  	 	  var attrName = key;
+	      var attrValue = data[key];
+	      var label = document.createElement("label");
+	         radioInput = document.createElement('input');
+	         radioInput.setAttribute('type', 'radio');
+	         radioInput.setAttribute('name', 'edu');
+	         radioInput.setAttribute('value', attrName);
+	         label.insertAdjacentHTML('afterBegin', attrValue);
+	         label.appendChild(radioInput);         
+	         edu.appendChild(label);
+  		}
+	}
+};
+
+window.onload=function(){
+	var script_element = document.createElement('script');
+	script_element.src = 'http://fedtest.aws.af.cm/?callback=update_form';
+	document.getElementsByTagName('head')[0].appendChild(script_element);
+};
diff --git a/styles/main.css b/styles/main.css
index 56ff515..6678966 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -56,6 +56,19 @@ input {
   box-sizing: border-box;
 }
 
+input[type=radio]{
+    width: 0;
+    float: left;  
+}
+
+#education{
+  display: block;
+  width: 100%;
+  padding: 5px;
+  border: 1px solid #93a1a1;
+  box-sizing: border-box;   
+}
+
 .error > input, .error > div{
      border: 1px solid #FF0000 !important;
 }

From 51397daa994ce03223b9c59be182fbba2e7cec2d Mon Sep 17 00:00:00 2001
From: unknown <nndustriemedia@gmail.com>
Date: Mon, 10 Feb 2014 01:13:41 -0700
Subject: [PATCH 3/3] removed an unnecessary div element from the education
 inputs

added an id to each label for use in validation.

added a call to the function validate for each label's onblur event, except for the education radio buttons, radio buttons are checked only when an atempt is made to submit the form.

added a call to the the function beforeSubmit.

when validation fails, the class "error" is added to the label, causing the css to display the title as a message to the user.

before submitting the the form, we run through the form one last time to verify each input is filed out and that no label has the class "error".
---
 index.html | 30 +++++++++++-------------
 js/main.js | 68 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 82 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index 91d564a..f37bb60 100644
--- a/index.html
+++ b/index.html
@@ -11,32 +11,30 @@ <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
     </div>
     <div class="container">
       <img class="banner" src="images/banner.jpg" alt="" />
-      <form method="post" action="index.html">
+      <form method="post" onsubmit="return beforeSubmit()" action="index.html">
         <h2>Nibh Hendrerit Sodales</h2>
-       <label class="validate" title="Please enter your first name">
+       <label id="fnameError" class="validate" title="Please enter your first name">
           First Name:
-          <input type="text" name="first_name" />
+          <input id="fname" type="text" name="first-name" onblur="validate('fname')" />
         </label>
-        <label class="validate" title="Please enter your last name">
+        <label id="lnameError" class="validate" title="Please enter your last name">
           Last Name:
-          <input type="text" name="last_name" />
+          <input id="lname" type="text" name="last-name" onblur="validate('lname')" />
         </label>
-        <label class="validate" title="Please enter a valid phone humber">
+        <label id="phoneError" class="validate" title="Please enter a valid phone humber">
           Phone Number:
-          <input type="text" name="phone" />
+          <input id="phone" type="text" name="phone" onblur="validate('phone')" />
         </label>
-        <label class="validate" title="Please enter a valid email address">
+        <label id="emailError" class="validate" title="Please enter a valid email address">
           Email Address:
-          <input type="text" name="email" />
+          <input id="email" type="text" name="email" onblur="validate('email')" />
         </label>
-         <div>
-          	<label class="validate" title="Please enter a valid email address">
-          	  Education Level:
-	          	<div id="education">
+        <label id="radioError" class="validate" title="Please enter a valid email address">
+          Education Level:
+	        <div id="education">
 	          		
-	          	</div>	
-          	</label>
-        </div>
+	        </div>	
+        </label>
         <div class="actions">
           <button type="submit">Request Information</button>
         </div>
diff --git a/js/main.js b/js/main.js
index 993e24d..bd6a4e0 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,3 +1,4 @@
+// jsonp call 
 function update_form (data) {
 var edu = document.getElementById("education");
   for(var key in data){
@@ -21,3 +22,70 @@ window.onload=function(){
 	script_element.src = 'http://fedtest.aws.af.cm/?callback=update_form';
 	document.getElementsByTagName('head')[0].appendChild(script_element);
 };
+
+// End jsonp call 
+
+
+// form validation
+var err = 0;
+function validate(e){
+	var val = document.getElementById(e).value;
+	switch (e)
+	{
+	case "fname":
+	  if(!val){err = 0; }else{ err = 1; }
+	  checkError(e);
+	  break;
+	case "lname":
+	  if(!val){err = 0; }else{ err = 1; }
+	  checkError(e);
+	  break;
+	case "phone":
+	  var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;  
+	  if(!val.match(phoneno)){err = 0; }else{ err = 1; }
+	  checkError(e);
+	  break;
+	case "email":
+	  var email = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
+	  if(!val.match(email)){err = 0; }else{ err = 1; }
+	  checkError(e);
+	  break;
+	}		
+};
+
+function checkError(e){
+	  var error = document.getElementById(e+'Error');
+  	  var errorClass = error.className;
+	 if(errorClass == "validate" && err == 0){
+	    	error.className = errorClass + " error";
+	    }
+	else if(errorClass == "validate error" && err >= 1){
+	    	error.className = errorClass = "";
+	    	error.className = errorClass + "validate";
+	    }
+}
+
+function lastCheck(){   
+   var radio = document.getElementsByName('edu');
+   var isradio;
+   for (var i=0; i<radio.length; i++) {
+		if (radio[i].checked) {
+			isradio = "checked";
+	    }
+	}
+	
+	if(isradio !== "checked"){err = 0; }else{ err = 1; }
+	  checkError('radio');
+		
+	var valarr = new Array("fname","lname","phone", "email");
+	for (i=0; i < valarr.length; i++) {
+		validate(valarr[i]);
+  	}  	  	
+}
+
+function beforeSubmit(){
+	lastCheck();
+	err = document.querySelectorAll('.error').length;
+	if(err == 0 ){ return true; }else{ return false; }
+}
+// end form validation