From 15d0ebdbbce752b13c94e59277310abccd7a0125 Mon Sep 17 00:00:00 2001
From: d30xy <mrogman@gmail.com>
Date: Tue, 13 Oct 2015 23:57:56 -0400
Subject: [PATCH 1/2] completed exercise

---
 index.html   |  4 ++--
 style.css    |  3 ++-
 validator.js | 50 +++++++++++++++++++++++++++++++++++++++++++++++---
 3 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 7cf849d..99a6602 100644
--- a/index.html
+++ b/index.html
@@ -15,8 +15,8 @@
   <div class="container">
     <h1>Sign In</h1>
     <form name="sign_in" action="#" method="put">
-      <input type="text" placeholder="Email"><br />
-      <input type="password" placeholder="Password"><br />
+      <input type="text" id='email' placeholder="Email"><br />
+      <input type="password" id='password' placeholder="Password"><br />
       <input type="submit" value="Sign In">
     </form>
 
diff --git a/style.css b/style.css
index e9f7a95..5f21d80 100644
--- a/style.css
+++ b/style.css
@@ -3,7 +3,7 @@
 .container {
   width: 720px;
   margin: 0 auto;
-  
+
 }
 
 h1 {
@@ -12,4 +12,5 @@ h1 {
 
 .errors li {
   color: red;
+  display: none;
 }
diff --git a/validator.js b/validator.js
index 860dab4..218984a 100644
--- a/validator.js
+++ b/validator.js
@@ -1,7 +1,51 @@
 
-  //insert your code here
- 
+  var $email  = $('#email');
+  var $password = $(':password');
+
+  var $errors = $('.errors li');
+  var $err_email_invalid  = $($errors[0]);
+  var $err_pass_short     = $($errors[1]);
+  var $err_pass_noUpper   = $($errors[2]);
+  var $err_pass_noNum     = $($errors[3]);
+
+   // ಠ_ಠ
+  var emailRegex = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
+
 $(function(){
 
-  //insert your code here
+  function validate(field) {
+
+    if(field.attr('id') === $email.attr('id')) {
+
+      var email = field.val();
+      console.log('validating email: ' + email);
+
+      //validate email
+      if(!email.match(emailRegex)) $err_email_invalid.show();
+
+      else $err_email_invalid.hide();
+
+    }
+    else if(field.attr('id') === $password.attr('id')) {
+
+      var password = field.val();
+      console.log('validating password: ' + password);
+
+      //validate password
+      if(password.length < 8) $err_pass_short.show();
+      else $err_pass_short.hide();
+
+      if(!password.match(/[A-Z]/)) $err_pass_noUpper.show();
+      else $err_pass_noUpper.hide();
+
+      if(!password.match(/\d+/)) $err_pass_noNum.show();
+      else $err_pass_noNum.hide();
+
+    }
+
+  }
+
+  //bind focusout validate event
+  $(':input').focusout(function() { validate($(this)) });
+
 });

From b869a140ae07f41c9a48f5734b5140100b8daeaa Mon Sep 17 00:00:00 2001
From: d30xy <mrogman@gmail.com>
Date: Wed, 14 Oct 2015 10:12:01 -0400
Subject: [PATCH 2/2] made validation more responsive

---
 validator.js | 56 +++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 44 insertions(+), 12 deletions(-)

diff --git a/validator.js b/validator.js
index 218984a..e115e9f 100644
--- a/validator.js
+++ b/validator.js
@@ -8,11 +8,33 @@
   var $err_pass_noUpper   = $($errors[2]);
   var $err_pass_noNum     = $($errors[3]);
 
-   // ಠ_ಠ
+  var emailValidated
+  var passwordValidated
+
+  // ಠ_ಠ
   var emailRegex = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
 
 $(function(){
 
+  //evaluate field validation conditions and toggle error message visibility
+  //note: match condition and message array by index (would be better to use map)
+  function evaluate(conditions, messages) {
+    var results = []
+    conditions.forEach(function(condition, index) {
+      if(condition) {
+        messages[index].show();
+        results.push(false);
+      }
+      else {
+        messages[index].hide();
+        results.push(true);
+      }
+    });
+
+    //field validation passes only if all of the conditions evaluate to true
+    return $.inArray(false, results) === -1
+  }
+
   function validate(field) {
 
     if(field.attr('id') === $email.attr('id')) {
@@ -21,9 +43,10 @@ $(function(){
       console.log('validating email: ' + email);
 
       //validate email
-      if(!email.match(emailRegex)) $err_email_invalid.show();
+      var conditions = [(!email.match(emailRegex))]
+      var messages   = [$err_email_invalid]
 
-      else $err_email_invalid.hide();
+      emailValidated = evaluate(conditions, messages);
 
     }
     else if(field.attr('id') === $password.attr('id')) {
@@ -32,20 +55,29 @@ $(function(){
       console.log('validating password: ' + password);
 
       //validate password
-      if(password.length < 8) $err_pass_short.show();
-      else $err_pass_short.hide();
-
-      if(!password.match(/[A-Z]/)) $err_pass_noUpper.show();
-      else $err_pass_noUpper.hide();
+      var conditions = [(password.length < 8), (!password.match(/[A-Z]/)), (!password.match(/\d+/))]
+      var messages   = [$err_pass_short      , $err_pass_noUpper         , $err_pass_noNum]
 
-      if(!password.match(/\d+/)) $err_pass_noNum.show();
-      else $err_pass_noNum.hide();
+      passwordValidated = evaluate(conditions, messages);
 
     }
 
   }
 
-  //bind focusout validate event
-  $(':input').focusout(function() { validate($(this)) });
+  //attach event handlers to input fields
+  $(':input')
+    //validate on focusout
+    .focusout(function() { validate($(this)) })
+    //validate focused field on enter keydown
+    .keydown(function (e) {
+      var key = e.which;
+      if(key == 13)  // 'enter' key code
+        validate($(this));
+    })
+    //if validation has failed retry validation on every keypress
+    .keyup(function(e) {
+      if(emailValidated === false) validate($email);
+      if(passwordValidated === false) validate($password);
+    })
 
 });