jQUery popup login

by katalin_2003

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<!-- Create user form -->
<div id="dialog-form" title="Create new user">
    <p class="validateTips">All form fields are required.</p>
    <form id="create_form">
        <fieldset>
            <div class="divfrm">
            <label for="name" class="lblfrm">Name</label>
            <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all"/>
            </div>
            <div class="divfrm">
            <label for="email" class="lblfrm">Email</label>
            <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all"/>
            </div>
            <div class="divfrm">
            <label for="password" class="lblfrm">Password</label>
            <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
            </div>
        </fieldset>
    </form>
</div>
<div id="users-contain" class="ui-widget">
    
<h1>Existing Users:</h1>

    <table id="users" class="ui-widget ui-widget-content" border="1">
        <thead>
            <tr class="ui-widget-header ">
                <th>Name</th>
            <th>Email</th>
            <th>Password</th></tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>[email protected]</td>
                <td>johndoe1</td>
            </tr>
        </tbody>
    </table>
</div>
<button id="create-user">Create new user</button>
<a id="docs" href="http://docs.jquery.com/Plugins/Validation"
target="_blank">Validation Documentation</a>

CSS

th, td {
    padding: 5px;
}

#docs {
    display: block;
    position: fixed;
    bottom: 0;
    right: 0;
}

.lblfrm {
    width: 100px;
    float: left;
}

.divfrm {
    margin-bottom: 10px;
}

JavaScript

$(function () {

    $("#create_form").validate({
        /*submitHandler: function(form) {
            doAjaxPost();
        },*/
        rules: {
            name: {
                required: true,
                minlength: 3,
                maxlength: 16
            },
            password: {
                required: true,
                minlength: 3,
                maxlength: 16
            }
        },
        messages: {
            name: {
                required: "<br />Login - is a mandatory field",
                minlength: "<br />Name should contain minimum {0} symbols",
                maxlength: "<br />Maximum symbols - {0}"
            },
            password: {
                required: "<br />Password - is a mandatory field",
                minlength: "<br />Password should contain minimum {0} symbols",
                maxlength: "<br />Password should contain maximum {0} symbols"
            }
        }
    });

    $("#dialog-form").dialog({
        autoOpen: false,
        height: 500,
        width: 400,
        modal: true,
        buttons: {
            Submit: function () {
                $("#create_form").submit();
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });

    $("#create-user").button().click(function () {
        $("#dialog-form").dialog("open");
    });

});