(function($) {
$('#first').focus();
var helpTip = $('.help'),
text = $(helpTip).attr('title');
function createTip(type, text) {
return '<div class="tip-'+ type +' tooltip">'+ text +'</div>';
};
function removeTip() {
$('.tip-error, .tip-help').remove();
};
var regexMap = [
[/[A-Z]/, 'Must contain upper case character'],
[/[a-z]/, 'Must contain lower case character'],
[/\d|\W/, 'Must contain a number or special character']
];
function validate(elem) {
/**
* NOTE
* The specs didnt show or say anything about validating
* the last name or username inputs. It wouldn't be hard
* to implement that. In fact it would be harder to not.
*/
if ($(elem).attr('id') === 'last' || elem.attr('id') === 'username') {
return;
}
if (elem.val() === '') {
elem.parent()
.addClass('invalid')
.append(createTip('error', 'Required Input'));
$('.help').addClass('hidden');
$('#submit').attr('disabled', 'disabled');
return false;
}
if (elem.attr('id') === 'password') {
for (var i = 0; i < regexMap.length; i++) {
if (!regexMap[i][0].test(elem.val())) {
elem
.parent()
.addClass('invalid')
.append(createTip('error wide-tip', regexMap[i][1]));
$('.help').addClass('hidden');
$('#submit').attr('disabled', 'disabled');
}
}
return false;
}
}
function thanks() {
$('body').find('h1, p:first, form').slideUp(1000);
$('#thanks').removeClass('hidden').slideDown(1000);
};
/** EVENTS **/
helpTip.hover(function() {
$(this).removeAttr('title');
var tipStr = createTip('help', text);
$('body').append(tipStr);
}, function() {
$(this).attr('title', text);
removeTip();
});
$('form').on('submit', function(e) {
e.preventDefault();
var input = $('input'),
valid = false;
input.parent().removeClass('invalid').find('.tip-error').remove();
for (var i = 0; i < input.length; i++) {
validate($(input[i]));
}
if ($('.invalid').length === 0) {
$.ajax({
url: '/echo/json/'
}).done(function(response) {
console.log('Response: ', response);
thanks();
});
} else {
return false;
}
});
$('input').on('keyup', function(e) {
$(this).parent().removeClass('invalid').find('.tip-error').remove();
$('#submit').removeAttr('disabled');
validate($(this));
if ($('.invalid').length) {
$('#submit').attr('disabled', 'disabled');
}
});
})(jQuery);
<!doctype html>
<html>
<head></head>
<body>
<h1>A Basic Form</h1>
<p>Try submitting the form without entering anything in, and after each validation check based on what is missing.</p>
<form id="register" action="/echo/json/">
<label for="first">First Name:
<input type="text" id="first" name="first" />
</label>
<label for="last">Last Name:
<input type="text" id="last" name="last" />
</label>
<label for="username">Username:
<input type="text" id="username" name="username" />
</label>
<label for="password">Password:
<input type="password" id="password" name="password" />
<a href="#" class="help" title="The password must contain a minimum of at least one lower case character, one upper case, and one digit or special character.">?</a>
</label>
<input type="submit" id="submit" name="submit" value="sign-up" />
</form>
<div id="thanks" class="hidden">
<h2>Thanks!!</h2>
<p>You have successfully submitted this form. Wasn't that fun? Try it again. Be sure to check out the code to see how the gradients and arrows for the tooltips were done.</p>
<p>I didn't see the specs until I finished making this, and I just happened to make on jsfiddle, and exactly to what the specs required me to do also. I was just doing it based on the image itself in the email, then viewed it on a wider screen and saw the specs after I was finished already.</p>
</div>
</body>
</html>
body {
font-family: "helvetica", "verdana", "arial";
font-size: 12px;
}
h1 {
font-size: 18px;
color: #666;
font-weight: normal;
margin: 20px 0 0 20px;
}
p {
margin: 5px 0 0 20px;
width: 400px;
}
.hidden {
visibility: hidden;
display: none;
}
#thanks {
display: inline-block;
width: 260px;
}
#thanks h2 {
color: #009900;
font-size: 20px;
font-weight: bold;
display: block;
margin: 20px 0 0 20px;
}
form {
border: 1px solid #666;
display: inline-block;
margin: 20px;
padding: 20px;
width: 270px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 0 20px 0 rgba(100, 100, 100, 0.7);
box-shadow: 0 0 20px 0 rgba(100, 100, 100, 0.7);
background: rgb(229, 229, 229);
background: -moz-linear-gradient(top,
rgba(229, 229, 229, 1) 0%,
rgba(255, 255, 255, 1) 32%
);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, rgba(229, 229, 229, 1)),
color-stop(32%, rgba(255, 255, 255, 1))
);
background: -webkit-linear-gradient(top,
rgba(229, 229, 229, 1) 0%,
rgba(255, 255, 255, 1) 32%
);
background: -o-linear-gradient(top,
rgba(229, 229, 229, 1) 0%,
rgba(255, 255, 255, 1) 32%
);
background: -ms-linear-gradient(top,
rgba(229, 229, 229, 1) 0%,
rgba(255, 255, 255, 1) 32%
);
background: linear-gradient(to bottom,
rgba(229, 229, 229, 1) 0%,
rgba(255, 255, 255, 1) 32%
);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#e5e5e5',
endColorstr='#ffffff',
GradientType=0
);
}
label {
display: inline-block;
font-weight: bold;
color: #333;
position: relative;
margin: 10px 0;
}
input {
border: 1px solid #999;
padding: 5px 3px;
margin: 0 0 0 3px;
width: 170px;
-webkit-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 0 8px 0 rgba(100, 100, 100, 0.7);
box-shadow: 0 0 8px 0 rgba(100, 100, 100, 0.7);
}
label.invalid {
color: #cc0000;
}
label.invalid input {
border: 1px solid #930000;
-webkit-box-shadow: 0 0 8px 0 rgba(140, 0, 0, 0.7);
box-shadow: 0 0 8px 0 rgba(140, 0, 0, 0.7);
}
#submit {
background: #009900;
border: 1px solid #fff;
color: #fff;
text-shadow: 1px 1px 3px rgba(20, 20, 20, 0.7);
font-weight: bold;
width: 70px;
margin-right: 25px;
float: right;
padding: 4px;
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0 0 1px 1px #006600;
box-shadow: 0 0 1px 1px #006600;
}
#submit[disabled] {
background: rgb(156, 156, 156);
-webkit-box-shadow: 0 0 1px 1px rgb(156, 156, 156);
box-shadow: 0 0 1px 1px rgb(156, 156, 156);
}
.help {
padding: 0 5px;
}
/* Tooltips */
.tooltip {
color: #fff;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
float: left;
z-index: 2;
-webkit-border-radius: 5px 2px 2px 5px;
border-radius: 5px 2px 2px 5px;
}
.tooltip:after {
content: "";
display: block;
position: absolute;
z-index: -1;
-webkit-transform: scaleX(.5) rotate(45deg);
-moz-transform: scaleX(.5) rotate(45deg);
-ms-transform: scaleX(.5) rotate(45deg);
-o-transform: scaleX(.5) rotate(45deg);
transform: scaleX(.5) rotate(45deg);
}
.tooltip:before {
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}
/* Help Tooltip */
.tip-help {
padding: 20px;
position: relative;
left: 318px;
top: -138px;
width: 200px;
}
.tip-help,
.tip-help:before {
background: rgb(69, 72, 77);
background: -moz-linear-gradient(top,
rgba(69, 72, 77, 1) 0%,
rgba(0, 0, 0, 1) 100%
);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, rgba(69, 72, 77, 1)),
color-stop(100%, rgba(0, 0, 0, 1))
);
background: -webkit-linear-gradient(top,
rgba(69, 72, 77, 1) 0%,
rgba(0, 0, 0, 1) 100%
);
background: -o-linear-gradient(top,
rgba(69, 72, 77, 1) 0%,
rgba(0, 0, 0, 1) 100%
);
background: -ms-linear-gradient(top,
rgba(69, 72, 77, 1) 0%,
rgba(0, 0, 0, 1) 100%
);
background: linear-gradient(to bottom,
rgba(69, 72, 77,1) 0%,
rgba(0, 0, 0, 1) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#45484d',
endColorstr='#000000',
GradientType=0
);
}
/* Arrow notch */
.tip-help:after {
background: #222;
border: solid #000;
border-width: 0 0 2px 2px;
left: -10px;
top: 40px;
height: 20px;
width: 20px;
}
.tip-help:before {
border: 1px solid #000;
/* background: rgb(69, 72, 77);
background: -moz-linear-gradient(top,
rgba(69, 72, 77, 1) 0%,
rgba(0, 0, 0, 1) 100%
);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, rgba(69, 72, 77, 1)),
color-stop(100%, rgba(0, 0, 0, 1))
);
background: -webkit-linear-gradient(top,
rgba(69, 72, 77, 1) 0%,
rgba(0, 0, 0, 1) 100%
);
background: -o-linear-gradient(top,
rgba(69, 72, 77, 1) 0%,
rgba(0, 0, 0, 1) 100%
);
background: -ms-linear-gradient(top,
rgba(69, 72, 77, 1) 0%,
rgba(0, 0, 0, 1) 100%
);
background: linear-gradient(to bottom,
rgba(69, 72, 77,1) 0%,
rgba(0, 0, 0, 1) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#45484d',
endColorstr='#000000',
GradientType=0
);
*/}
/* ERROR TOOLTIP */
.tip-error {
display: inline-block;
position: absolute;
left: 253px;
top: -8px;
width: 85px;
height: auto;
padding: 12px;
}
.tip-error,
.tip-error:before {
background: rgb(234, 23, 23);
background: -moz-linear-gradient(top,
rgba(234, 23, 23, 1) 0%,
rgba(214, 47, 21, 1) 39%,
rgba(206, 45, 20, 1) 56%,
rgba(207, 4, 4, 1) 100%
);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, rgba(234, 23, 23, 1)),
color-stop(39%, rgba(214, 47, 21, 1)),
color-stop(56%, rgba(206, 45, 20, 1)),
color-stop(100%, rgba(207, 4, 4, 1))
);
background: -webkit-linear-gradient(top,
rgba(234, 23, 23, 1) 0%,
rgba(214, 47, 21, 1) 39%,
rgba(206, 45, 20, 1) 56%,
rgba(207, 4, 4, 1) 100%
);
background: -o-linear-gradient(top,
rgba(234, 23, 23, 1) 0%,
rgba(214, 47, 21, 1) 39%,
rgba(206, 45, 20, 1) 56%,
rgba(207, 4, 4, 1) 100%
);
background: -ms-linear-gradient(top,
rgba(234, 23, 23, 1) 0%,
rgba(214, 47, 21, 1) 39%,
rgba(206, 45, 20, 1) 56%,
rgba(207, 4, 4, 1) 100%
);
background: linear-gradient(to bottom,
rgba(234, 23, 23, 1) 0%,
rgba(214, 47, 21, 1) 39%,
rgba(206, 45, 20, 1) 56%,
rgba(207, 4, 4, 1) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#ea1717',
endColorstr='#cf0404',
GradientType=0
);
}
/* Arrow notch */
.tip-error:after {
border: solid #ff1a00;
border-width: 0 0 2px 2px;
left: -8px;
top: 13px;
height: 15px;
width: 15px;
background: rgb(214, 47, 21);
background: -moz-linear-gradient(top,
rgba(214, 47, 21, 1) 1%,
rgba(206, 45, 20, 1) 100%
);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(1%, rgba(214, 47, 21, 1)),
color-stop(100%, rgba(206, 45, 20, 1))
);
background: -webkit-linear-gradient(top,
rgba(214, 47, 21, 1) 1%,
rgba(206, 45, 20, 1) 100%
);
background: -o-linear-gradient(top,
rgba(214, 47, 21, 1) 1%,
rgba(206, 45, 20, 1) 100%
);
background: -ms-linear-gradient(top,
rgba(214, 47, 21, 1) 1%,
rgba(206, 45, 20, 1) 100%
);
background: linear-gradient(to bottom,
rgba(214, 47, 21, 1) 1%,
rgba(206, 45, 20, 1) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#d62f15',
endColorstr='#ce2d14',
GradientType=0
);
}
.tip-error:before {
border: 1px solid #ff1a00;
}
.wide-tip {
width: 200px;
}