Ajax Login Box (Clonable)

Wiith unique IDs on each clone

by Rynne Cowham

HTML

<div id="container">
    <div class="login_wrapper" id="login-wrapper">
        <form id="form-login" class="login_box" action="http://api.yoursite.com/login" method="post">
            <fieldset>
                <legend>Login</legend>
                <ul>
                    <li class="row">
                        <label for="userid">User ID</label>
                        <input id="input-name" type="text" class="text-input required default" name="appleid" value="" placeholder="User ID" aria-required="true" />
                    </li>
                    <li class="row">
                        <label for="password">Password</label>
                        <input id="input-password" type="password" class="text-input required default" name="password" value="" placeholder="Password" aria-required="true" />
                    </li>
                    <li class="row">
                        <input class="button-submit" type="submit" value="Go to my account" name="submit" />
                    </li>
                </ul>
            </fieldset>
        </form>
    </div>
</div>
<div class="cloner">
    <button class="cloner">Clone me!</button>
</div>

CSS

.login_wrapper {
    width:400px;
    padding:10px 0;
    margin-bottom:20px;
    font-family:arial, sans-serif;
    background:#666;
}
.login_box {
    display:block;
    width:300px;
    margin:10px auto;
}
.login_box fieldset {
    padding:10px 0;
    border:0;
    margin:0 auto;
}
.login_box fieldset legend {
    display:block;
    padding:10px 0;
    font-size:14px;
    font-weight:bold;
    color:#fff;
}
.login_box fieldset ul, .login_box fieldset ul li {
    list-style:none;
    width:100%;
    padding:0;
    margin:0;
}
.login_box fieldset li.row {
    position:relative;
    overflow:hidden;
    margin-bottom:10px;
}
.login_box label {
    display:none;
}
.login_box input {
    display:block;
    width:276px;
    padding:10px;
    border:2px solid #000;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font:bold 12px arial, sans-serif;
}
.login_box input.text-input {
    background:#e8e8e8;
}
.login_box input.text-input.default.active {
    color:#666;
}
.login_box input.button-submit {
    width:300px;
    color:#fff;
    background:#db4a39;
    -webkit-appearance:none;
}
/* validation */
 .login_box span.error {
    display:block;
    font-size:12px;
    text-align:center;
}
.login_box fieldset li.error {
    width:300px;
    padding:6px 0;
    border:1px solid #c00;
    color:#c00;
    background:#ffee66;
}

JavaScript

$(document).ready(function () {
    $('.default').each(function () {
        var defaultText = $(this).attr('placeholder');
        $(this).focus(function () {
            if ($(this).val() == '') {
                $(this).removeClass('active').attr('placeholder', '');
                $(this).parents('li').removeClass('error');
                $(this).next('span.error').remove();
            }
        });
        $(this).blur(function () {
            if ($(this).val() == '') {
                $(this).addClass('active').attr('placeholder', defaultText);
            }
        })
            .blur().addClass('active');
    });

    $('.button-submit').click(function (e) {
        var $formId = $(this).parents('form');
        var formAction = $formId.attr('action');
        $('li', $formId).removeClass('error');
        $('span.error').remove();
        $('.required', $formId).each(function () {
            var inputVal = $(this).val();
            var $parentTag = $(this).parent();
            if (inputVal == '') {
                $parentTag.addClass('error').append('<span class="error">Your ' + $(this).attr('placeholder') + ' is required.</span>');
            }
        });
        if ($('span.error').length == "0") {
            str = $formId.serialize();
            errormsg = "Login failed.";
            successmsg = "Login successful.";
            // conditional to mimic success since form URL is a fake construct //
            if (str == "userid=Rynne&password=LoveDemApples") {
                console.log(successmsg);
                return false;
                $.off();
            }
            $.ajax({
                url: $('form').attr('action'),
                type: $('form').attr('method'),
                data: str,
                dataType: 'json',
                crossDomain: true
            }).done(function (data, textStatus, xhr) {
                console.log(successmsg);
            }).fail(function (xhr, textStatus, errorThrown) {
         ...