TandemSeven Code Test

A form which contains tooltips with gradients and arrow pointers coded with CSS3. Also includes basic form validation for required inputs and requirements for allowed password inputs.

by gk

HTML

<!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. Source: http://anti-code.com/blog/5-coolest-jsfiddles/</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>

CSS

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

JavaScript

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