PHP - Holas amigo quiero hacer un formulario que me deteste campos vacio

   
Vista:
Imágen de perfil de wilson

Holas amigo quiero hacer un formulario que me deteste campos vacio

Publicado por wilson (18 intervenciones) el 03/11/2017 22:20:46
Hola quiero hacer un formulario que em diga los campos vacíos.
Pero lo quiero hacer como se ve en esta foto. contactanos20130925
soporto hacerlo con JS,CSS o PHP no librerias.
Gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de abzerox

Holas amigo quiero hacer un formulario que me deteste campos vacio

Publicado por abzerox (145 intervenciones) el 04/11/2017 04:29:06
Hola , te dejo un ejemplo el cual puedes estudiar y modificarlo a tu necesidad.

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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<html>
<head>
    <style>
        html {
        font-size: 16px;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        }
 
        ::before,
        ::after {
        box-sizing: inherit;
        }
 
        body {
        font-size: 1rem;
        }
 
        .container {
        max-width: 500px;
        margin: 2rem auto;
        border: 1px solid #ccc;
        padding: 1rem;
        }
 
        .input-group {
        position: relative;
        margin-bottom: 1rem;
        padding: 1rem 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        }
 
        .form-control {
        padding: .3rem;
        flex: 1;
        }
 
        .label {
        margin-right: 1rem;
        }
 
        .button {
        width: 100%;
        padding: .5rem;
        border: none;
        background-color: #121212;
        color: #fff;
        transition: all .3s;
        cursor: pointer;
        }
 
        .button:hover {
        background-color: #232323;
        }
 
        .tooltip {
        display: none;
        position: absolute;
        top: 15px;
        right: -150;
        min-width: 125px;
        max-width: 250px;
        background-color: #cb2431;
        color: #fff;
        padding: .5rem;
        font-size: .8rem;
        word-wrap: break-word;
        }
 
        .tooltip::before {
        content: '';
        position: absolute;
        left: -12px;
        top: 10px;
        width: 0;
        height: 0;
        background-color: transparent;
        border: 6px solid transparent;
        border-right-color: #cb2431;
        }
 
        .tooltip.show {
        display: block;
        }
 
        @media screen and (max-width: 960px) {
            .tooltip {
                right: 0;
                top: -40px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <form id="form" action="#" method="post">
            <div class="input-group">
                <label for="name" class="label">Name: </label>
                <input type="text" name="name" id="name" class="form-control">
                <span class="tooltip"> Campo Requerido </span>
            </div>
            <div class="input-group">
                <input type="submit" class="button">
            </div>
        </form>
    </div>
 
    <script>
        (function() {
            const form = document.getElementById('form');
            const inputs = Array.from(form.querySelectorAll('input:not([type="submit"])'));
 
            function _hideTooltips() {
                const tooltips = Array.from(form.querySelectorAll('.tooltip'));
                tooltips.forEach((e) => {
                    e.innerHTML = '';
                    e.classList.remove('show');
                });
            };
 
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                _hideTooltips();
 
                // campos requeridos
                inputs.forEach((e) => {
                    if (e.value === '') {
                        // [NOTA]: 
                        // SOLO FUNCIONA SI EL tootip se encuentra despues del 
                        // input en el DOM. De otra forma debera asociarse un ID
                        // o seleccionarlo aplicando DOM Traversing.
                       e.nextElementSibling.innerHTML = 'Campo Requerido';
                       e.nextElementSibling.classList.add('show');
                    }
                });
            });
        })();
    </script>
</bdoy>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Imágen de perfil de facundo

Holas amigo quiero hacer un formulario que me deteste campos vacio

Publicado por facundo (185 intervenciones) el 04/11/2017 22:49:41
Hola abzerox, me podes decir la parte del codigo que se encarga de comprobar los campos vacios sin tocar submit? seria lo mismo para hacer por ejemplo.. una comprobacion de si ya existe un usuario con ese nombre o email. Me pareceria que es un codigo bastante sencillo y concreto me gustaria aprenderlo. Por eso te pregunto.. cual es la parte del codigo que se encarga de hacer una validacion sin tocar submit? recien estoy por empezar javascript, en realidad en 2 dias empezaba a estudiarlo jeje
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de abzerox

Holas amigo quiero hacer un formulario que me deteste campos vacio

Publicado por abzerox (145 intervenciones) el 05/11/2017 06:23:01
Hola facundo, el código no es muy complejo, ya que wilson quería mostrar el tooltip cuando el campo estaba vacío. Pero sí perfectamente se puede adaptar para poder realizar cualquier validación, aunque cuando son validación más especificas que solo chequear los campos requeridos, como puede ser validar un email, un usuario, etc, es mejor crear funciones individuales para cada caso. Te dejo un ejemeplo un poco más completo que puedes estudiar y modificar.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Revisar política de publicidad