Pull Request for Nathan White

.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>

index.html

@@ -11,23 +11,29 @@ <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>
+       <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>
+        <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>
+        <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>
+        <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>
+        <label id="radioError" class="validate" title="Please enter a valid email address">
+          Education Level:
+	        <div id="education">
+
+	        </div>	
         </label>
         <div class="actions">
           <button type="submit">Request Information</button>
@@ -47,5 +53,6 @@ <h2>Nibh Hendrerit Sodales</h2>
         </p>
       </div>
     </div>
+    <script type="text/javascript" src="js/main.js"></script>
   </body>
 </html>

js/main.js

@@ -0,0 +1,91 @@
+// jsonp call 
+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);
+};
+
+// 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

styles/main.css

@@ -56,6 +56,32 @@ 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;
+}
+
+.error:before {
+    content: attr(title);
+    position: absolute;
+    right: 20px; 
+    color: #FF0000;
+    font-size: 9px;
+}
+
+
 .actions button {
   width: 100%;
   padding: 10px;
@@ -75,3 +101,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%;}
+}
+
+