Subversion-Projekte lars-tiefland.zeldi.de

Revision

Blame | Letzte Änderung | Log anzeigen | RSS feed 

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <title>Test for jQuery validate() plugin</title>
        <link rel="stylesheet" media="screen" href="css/screen.css">
        <style>
        .warning {
                color: red;
        }
        </style>
        <script src="../lib/jquery.js"></script>
        <script src="../lib/jquery.mockjax.js"></script>
        <script src="../lib/jquery.form.js"></script>
        <script src="../dist/jquery.validate.js"></script>
        <script>
        jQuery(function() {
                $.mockjax({
                        url: "login.action",
                        response: function(settings) {
                                var user = settings.data.match(/user=(.+?)($|&)/)[1],
                                        password = settings.data.match(/password=(.+?)($|&)/)[1];
                                if (password !== "foobar") {
                                        this.responseText = "Your password is wrong (must be foobar).";
                                        return;
                                }
                                this.responseText = "Hi " + user + ", welcome back.";
                        },
                        responseStatus: 200,
                        responseTime: 500
                });

                // show a simple loading indicator
                var loader = jQuery('<div id="loader"><img src="images/loading.gif" alt="loading..."></div>')
                        .css({
                                position: "relative",
                                top: "1em",
                                left: "25em",
                                display: "inline"
                        })
                        .appendTo("body")
                        .hide();
                jQuery().ajaxStart(function() {
                        loader.show();
                }).ajaxStop(function() {
                        loader.hide();
                }).ajaxError(function(a, b, e) {
                        throw e;
                });

                var v = jQuery("#form").validate({
                        submitHandler: function(form) {
                                jQuery(form).ajaxSubmit({
                                        target: "#result"
                                });
                        }
                });

                jQuery("#reset").click(function() {
                        v.resetForm();
                });
        });
        </script>
</head>
<body>
<h1 id="banner"><a href="https://jqueryvalidation.org/">jQuery Validation Plugin</a> Demo</h1>
<div id="main">
        <form method="post" class="cmxform" id="form" action="login.action">
                <fieldset>
                        <legend>Login Form (Enter "foobar" as password)</legend>
                        <p>
                                <label for="user">Username</label>
                                <input id="user" name="user" title="Please enter your username (at least 3 characters)" class="required" minlength="3">
                        </p>
                        <p>
                                <label for="pass">Password</label>
                                <input type="password" name="password" id="password" class="required" minlength "5">
                        </p>
                        <p>
                                <input class="submit" type="submit" value="Login">
                        </p>
                </fieldset>
        </form>
        <div id="result" class="warning">Please login!</div>
        <br>
        <button id="reset">Programmatically reset above form!</button>
        <a href="index.html">Back to main page</a>
</div>
</body>
</html>