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

Imágen de perfil
Val: 393
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

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


JQuery

Publicado el 23 de Marzo del 2015 por Xve (285 códigos)
4.606 visualizaciones desde el 23 de Marzo del 2015
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

Publicado el 23 de Marzo del 2015gráfica de visualizaciones de la versión: Versión 1.0 - Únicamente muestra la viñeta
777 visualizaciones desde el 23 de Marzo del 2015

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
3.830 visualizaciones desde el 24 de Marzo del 2015
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
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...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s3085