Advanced Search

Return to Snippet

Revision: 18469
at September 30, 2009 12:53 by KF
Initial Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Animate validation feedback using jQuery</title>
    <style type="text/css">
        body
        {
            font-family:Arial, Sans-Serif;
            font-size:0.85em;
        }
        img 
        {
            border:none;
        }
        ul, ul li
        {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        ul li.first
        {
            border-top: 1px solid #DFDFDF;
        }
        ul li.last
        {
            border: none;
        }
        ul p
        {
            float: left;
            margin: 0;
            width: 310px;
        }
        ul h3
        {
            float: left;
            font-size: 14px;
            font-weight: bold;
            margin: 5px 0 0 0;
            width: 200px;
            margin-left:20px;
        }
        ul li
        {
            border-bottom: 1px solid #DFDFDF;
            padding: 15px 0;
            width:600px;
            overflow:hidden;
        }
        ul input[type="text"], ul input[type="password"]
        {
            width:300px;
            padding:5px;
            position:relative;
            border:solid 1px #666;
            -moz-border-radius:5px;
            -webkit-border-radius:5px;
        }
        ul input.required 
        {
            border: solid 1px #f00;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#signup").click(function() {

                resetFields();
                var emptyfields = $("input[value=]");
                if (emptyfields.size() > 0) {
                    emptyfields.each(function() {
                        $(this).stop()
                            .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
                            .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
                            .animate({ left: "0px" }, 100)
                            .addClass("required");
                    });
                }
            });
        });
        function resetFields() {
            $("input[type=text], input[type=password]").removeClass("required");
        }
    </script>
</head>
<body>

    <h1>JankoAtWarpSpeed demos</h1>
    <p>Demo for <a href="http://www.jankoatwarpspeed.com/post/2009/09/16/Animate-validation-feedback-using-jQuery.aspx">Animate validation feedback using jQuery</a></p>
    <h2><img src="header.png" alt="Account information" /></h2>
    <ul>
        <li class="first">
            <h3>Your Name</h3>
            <p>

                <input type="text" value="First and Last name" id="name" name="name" /></p>
        </li>
        <li>
            <h3>Email</h3>
            <p>
                <input type="text" value="[email protected]" name="email"  /></p>
        </li>
        <li>

            <h3>Password</h3>
            <p>
                <input type="password" name="passwd" /></p>
        </li>
        <li>
            <h3>Password confirmation</h3>
            <p>
                <input type="password" name="passwd_conf"  /></p>

        </li>
        <li>
            <h3>User name</h3>
            <p>
                <input type="text" value="MyUserName" id="userName" name="user_name"  /></p>
        </li>
        <li class="last">
            <a id="signup" href="#"><img src="button.png" alt="Fake signup button" style="vertical-align:middle;" /></a><img src="clickhere.png" alt="" style="vertical-align:middle;" />

        </li>
    </ul>
</body>
</html>
Initial URL 









Initial Description














Initial Title





Animate Validation feedback using jQuery









Initial Tags





forms, jquery









Initial Language





JavaScript