pre_VALIDACION 2

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Validación</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_es.js" type="text/javascript"></script>
    <style>
        #formulario{
            width: 300px;
            position: relative;
            margin: auto;
            padding: 10px;
            background: #cecece;
            -moz-border-radius: 10px;
        }
        #formulario input{
            width: 200px;
        }
        label{
            position: absolute;
            color:#888;
            font-weight: bold;
            display: block;
        }
        label.valid{
            display: inline;
            margin-left: 10px;
            padding:10px;
            background: url("images/valid.gif") center left no-repeat;
        }
    </style>
    <script>
    $(document).ready(function(){
        $("#formulario").validate({
            rules:{
                nombre:{
                    required:true
                },
                sitio:{
                    required:true,
                    url:true
                },
                correo:{
                    required:true,
                    email:true
                },
                clave:{
                    required:true,
                    minlength:6
                },
                clave2:{
                    required:true,
                    equalTo:"#clave"
                }
            },
            success:function(etiqueta){
                $(etiqueta).addClass("valid");
            }
        });
    });
    </script>

</head>
<body>
<form id="formulario">
    <h2>Formulario de registro</h2>
    <div>
        <p>Nombre</p>
        <input type="text" name="nombre" />
    </div>
    <div>
        <p>Sitio web</p>
        <input type="text" name="sitio" />
    </div>
    <div>
        <p>Correo</p>
        <input type="text" name="correo" />
    </div>
    <div>
        <p>Clave</p>
        <input type="password" name="clave" id="clave" />
    </div>
    <div>
        <p>Repetir clave</p>
        <input type="password" name="clave2" />
    </div>
    <div>
        <br>
        <input type="submit" value="Grabar" />
    </div>
</form>
</body>
</html>