Login Modal

by BarDev

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/themes/base/jquery-ui.css">
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js"></script>
<body>
    <div id="CustomerLoginDialog">
        <form action="/MySite/Customer/CustomerLogin" id="customerLoginForm" method="post">
            <fieldset>
                <legend>CustomerLoginMV</legend>
                
                <div class="editor-label">
                    <label for="UserName">User Name</label>
                </div>
                <div class="editor-field">
                    <input class="text-box single-line" data-val="true" data-val-length="The field User Name must be a string with a minimum length of 3 and a maximum length of 20." data-val-length-max="20" data-val-length-min="3" data-val-required="The User Name field is required." id="UserName" name="UserName" type="text" value="" />
                    <span class="field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true"></span>
                </div>
                
                <div class="editor-label">
                    <label for="Password">Password</label>
                </div>
                <div class="editor-field">
                    <input class="text-box single-line" data-val="true" data-val-length="The field Password must be a string with a minimum length of 3 and a maximum length of 20." data-val-length-max="20" data-val-length-min="3" data-val-required="The Password field is required." id="Password" name="Password" type="text" value="" />
                    <span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span>
                </div>
                
                <p>
                    <input type="submit" value="Save" />
                </p>
            </fieldset>
        </form>
    </div>...

JavaScript

$(function() {
    $("#customerLoginForm").submit(function() {
        alert($(this).valid());
        return false;
    });

    $("#CustomerLoginDialog").dialog({
        autoOpen: true,
        modal: true,
        width: 300

    });

});