diff --git a/index.html b/index.html
index 7cf849d..99a6602 100644
--- a/index.html
+++ b/index.html
@@ -15,8 +15,8 @@
Sign In
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..e115e9f 100644
--- a/validator.js
+++ b/validator.js
@@ -1,7 +1,83 @@
- //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 emailValidated
+ var passwordValidated
+
+ // ಠ_ಠ
+ var emailRegex = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
+
$(function(){
- //insert your code here
+ //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')) {
+
+ var email = field.val();
+ console.log('validating email: ' + email);
+
+ //validate email
+ var conditions = [(!email.match(emailRegex))]
+ var messages = [$err_email_invalid]
+
+ emailValidated = evaluate(conditions, messages);
+
+ }
+ else if(field.attr('id') === $password.attr('id')) {
+
+ var password = field.val();
+ console.log('validating password: ' + password);
+
+ //validate password
+ var conditions = [(password.length < 8), (!password.match(/[A-Z]/)), (!password.match(/\d+/))]
+ var messages = [$err_pass_short , $err_pass_noUpper , $err_pass_noNum]
+
+ passwordValidated = evaluate(conditions, messages);
+
+ }
+
+ }
+
+ //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);
+ })
+
});