Código de JQuery - Como poner una viñeta de información al lado de un formulario

Imágen de perfil

Como poner una viñeta de información al lado de un formulariográfica de visualizaciones


JQuery

estrellaestrellaestrellaestrellaestrella(1)
Actualizado el 24 de Marzo del 2015 por xve (Creado el 23 de Marzo del 2015)
2.258 visualizaciones desde el 23 de Marzo del 2015. Una media de 28 por semana
Este código, muestra como visualizar una viñeta de información al lado de un input type=text cuando recibe el foco del cursor.
También se muestra una viñeta de error cuando el campo esta vació.

vineta

vineta-con-errores

Requerimientos

Se ha utilizado el código CSS de http://lwp-l.com/s2469

Versión 1.0 - Únicamente muestra la viñeta

Actualizado el 25 de Marzo del 2015 (Creado el 23 de Marzo del 2015)gráfica de visualizaciones de la versión: Versión 1.0 - Únicamente muestra la viñeta
410 visualizaciones desde el 23 de Marzo del 2015. Una media de 7 por semana

Versión 2.0 - Añade las viñetas de errores
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 24 de Marzo del 2015gráfica de visualizaciones de la versión: Versión 2.0 - Añade las viñetas de errores
1.849 visualizaciones desde el 24 de Marzo del 2015. Una media de 21 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

En este segunda versión, se añaden las viñetas de errores si los campos están vacíos.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
 
    <script>
    $(document).ready(function(){
 
        // Evento que se ejecuta cuando recibe el foco
        $("input[type=text]").focus(function(){
            // activamos la viñeta
            $(this).next("span").css({display:"inline"});
 
            // escondemos el error si estuviera activo
            $(this).next("span").next().hide();
        });
 
        // Evento que se ejecuta cuando pierde el foco
        $("input[type=text]").focusout(function(){
            // escondemos la viñeta
            $(".info").hide();
        });
    });
 
    /**
     * Función para validar que se haya introducido algun valor
     */
    function validar(){
        var nombre=$("form[name=miFormulario] input[name=nombre]");
        var apellidos=$("form[name=miFormulario] input[name=apellidos]");
 
        if(nombre.val().length==0)
        {
            // acivamos el error en el nombre
            nombre.next("span").next().css({display:"inline"});
        }
 
        if(apellidos.val().length==0)
        {
            // activamos el error en el apellido
            apellidos.next("span").next().css({display:"inline"});
        }
 
        if(nombre.val().length>0 && apellidos.val().length>0)
            return true;
        return false;
    }
    </script>
 
    <style>
    .mensaje {
        top:-12px;
        position:absolute;
        margin-left:30px;
        padding:7px 10px;
        border-radius:5px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        background-color:#ccc;
        border: 1px solid #808080;
    }
 
    .arrowLeft::after {
        position:absolute;
        left:-20px;
        top:15px;
        content:"\00a0";
        display:block;
        width:0px;
        height:0px;
        border-width:10px 20px 10px 10px;
        border-style:solid;
        border-color:transparent #ccc transparent transparent;
    }
 
    label {width:100px;display:inline-block;text-align:right;}
 
    .miFormulario span {display:none}
    .miFormulario p {position:relative;}
 
    .error {color:#fff;background-color:red;}
    .error:after {border-color:transparent red transparent transparent;}
 
    .miFormulario input[type=submit] {padding:8px 10px;margin-left:110px;}
    </style>
</head>
 
<body>
    <form class="miFormulario" name="miFormulario" onSubmit="return validar();">
        <p>
            <label>Nombre</label>
            <input type="text" name="nombre">
            <span class="mensaje arrowLeft info">Introduce tu nombre</span>
            <span class="mensaje arrowLeft error">El nombre es obligatorio</span>
        </p>
 
        <p>
            <label>Apellidos</label>
            <input type="text" name="apellidos">
            <span class="mensaje arrowLeft info">Introduce tus apellidos</span>
            <span class="mensaje arrowLeft error">Tus apellidos son obligatorios</span>
        </p>
 
        <p>
            <input type="submit" value="Enviar">
        </p>
    </form>
</body>
</html>



Comentarios sobre la versión: Versión 2.0 - Añade las viñetas de errores (1)

Imágen de perfil
Martin Garcia
24 de Marzo del 2015
estrellaestrellaestrellaestrellaestrella
Excelente y sencillo, las cosas buenas siempre son sencillas
Responder

Comentar la versión: Versión 2.0 - Añade las viñetas de errores

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s3085