Validar Formulario con JS
Publicado por Miguel (2 intervenciones) el 08/07/2019 00:09:17
Buenas, quisiera saber como puedo validar mi Formulario de tal forma que si existe uno o mas campos vacios se muestren en una especie de "Lista" al usuario, debido a que los procedimientos de validacion que he encontrado solo van verificando cada campo y retornando la alerta. Les dejo una imagen de lo que me gustaria y mi codigo:
https://lh5.googleusercontent.com/-1KxDJngmyaY/U5NAAgOpU2I/AAAAAAAABkU/7AvPBRwxdNI/w360-h372-no/ejemplo.png
https://lh5.googleusercontent.com/-1KxDJngmyaY/U5NAAgOpU2I/AAAAAAAABkU/7AvPBRwxdNI/w360-h372-no/ejemplo.png
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
<html>
<head>
<title>Formulario de Registro</title>
</head>
<style>
body{font-family: Arial;
font-size: 15px;
} form{ padding:10px;border-radius: 10px;
border-color: #ff0909;
background-color: #f5f19a;
margin: auto; width: 900px; }input, textarea, select{
border: solid 1px #000000;
border-radius: 10px;
outline: none; padding: 5px; width: auto; margin: 0; } fieldset{border-radius: 10px;
border: solid;border-color: #910000;
margin: 3px; } legend{ width: auto; height: auto; }button.css3button {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 10px 22px;background: -moz-linear-gradient(
top, #910000 0%,
#910000);
background: -webkit-gradient(
linear, left top, left bottom,
from(#910000),
to(#910000));
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 2px solid #000000;
-moz-box-shadow:
0px 1px 3px rgba(28,27,28,0.5),
inset 0px 0px 5px rgba(161,16,16,0.6);
-webkit-box-shadow:
0px 1px 3px rgba(28,27,28,0.5),
inset 0px 0px 5px rgba(161,16,16,0.6);
box-shadow:
0px 1px 3px rgba(28,27,28,0.5),
inset 0px 0px 5px rgba(161,16,16,0.6);
text-shadow:
0px -1px 3px rgba(255,255,255,0.8),
0px 1px 0px rgba(255,255,255,0.3);
cursor: pointer; cursor: hand;
}</style> <!--Diseño de Formulario-->
<script type="text/javascript">
function validarcedula(e)
{tecla = (document.all) ? e.keyCode : e.which;
//Tecla de retroceso para borrar=
if (tecla==8)
{return true;
} // Patron de entrada=
patron =/[0-9]/;
tecla_final = String.fromCharCode(tecla);
return patron.test(tecla_final);
} //Validar cedula (Javascript)
function validartelefono(e)
{tecla = (document.all) ? e.keyCode : e.which;
//Tecla de retroceso para borrar=
if (tecla==8){
return true;
} //Tecla de guión
if (tecla==45){
return true;
} // Patron de entrada=
patron =/[0-9]/;
tecla_final = String.fromCharCode(tecla);
return patron.test(tecla_final);
} //Validar número de telefono (Javascript)
</script>
<body>
<center>
<img src="Logo-IUTIRLA-cs6-06.jpg" alt="LogoUniversitario"/>
</center> <!--Logo-->
<center><h1><b><font>PLANILLA DE INSCRIPCIÓN</font></b></h1></center>
<form action="recibirformulario.php" name="formulario" id="miFormulario" method="POST">
<fieldset>
<legend><b>Datos Personales</b></legend>
<p>
Apellidos: <input type="text" name="apellidos" id="Apellidos" maxlength="25"size="45" required
placeholder="Escriba sus 2 apellidos">
Nombres: <input type="text" name="nombres" id="Nombres" maxlength="25" size="45" required
placeholder="Escriba sus nombres">
</p> <!-- Nombre y Apellido -->
<p>
Cédula de Identidad: <input type="text" name="cedula" id="cedula" maxlength="8" minlength="6" size="10" pattern="[0-9]{6-8}" title="Debe incluir su número de cédula sin puntos ni espacios." required placeholder="Sólo números"
onkeypress="return validarcedula(event)">
Lugar de Nacimiento: <input type="text" name="lugarnac" id="LugardeNacimiento" maxlength="25" size="19" required placeholder="Parroquia, Estado."/>
Fecha de Nacimiento: <input type="date" name="fechanac" id="FechadeNacimiento" min="1960-08-31" max="2002-08-31" required>
</p> <!-- CI, Lugar Nacimiento, Fecha Nacimiento-->
<p>
Estado Civil: <select name="estadocivil" required>
<option>...</option>
<option value="Soltero">Soltero/a</option>
<option value="Casado">Casado/a</option>
<option value="Otro">Otro</option>
</select>
Número de Habitación: <input type="text" name="telefono" id="telefono" size="15" maxlength="12" pattern="[0-9]{4}[-][0-9]{7}" title="El número de teléfono debe tener el codigo de área separado por un guión de los otros 7 dígitos, ejemplo: 0212-4773563" placeholder="Número de teléfono" required
onkeypress="return validartelefonohab(event)">
Número de Celular: <input type="text" name="celular" id="celular" size="14" maxlength="12" pattern="[0-9]{4}[-][0-9]{7}" title="El número de celular debe tener el código de la línea telefónica separado por un guión de los otros 7 dígitos, ejemplo: 0412-8550908" placeholder="Número de celular" required
onkeypress="return validartelefono(event)">
Sexo: <input type="radio" name="sexo" value="Masculino"> M
<input type="radio" name="sexo" value="Femenino"> F
</p> <!--Estado Civil, Número de Teléfono, Sexo-->
<p>
Correo Electrónico: <input type="email" name="correo" id="correo" size="96" maxlength="45" title="Ejemplo: 1234@gmail.com" placeholder="Coloque su Correo Electrónico" required>
</p> <!-- Correo de contacto -->
<p>
Dirección de habitación: <input type="text" name="direccion" id="direccion" maxlength="45" size="92" required placeholder="Lugar donde reside actualmente.">
</p> <!--Direccion-->
</fieldset> <!--Datos personales-->
<fieldset>
<legend><b>Trabajo</b></legend>
<p>
Empresa donde trabaja: <input type="text" name="trabajo" maxlength="20" size="20" title="Si no posee empleo dejar línea en blanco." placeholder="Solo si aplica.">
Número de Trabajo: <input type="text" name="teltrab" size="15" maxlength="12" pattern="\[0-9]{4}[-][0-9]{7}" title="El número de teléfono de su trabajo debe tener el código de la línea telefónica o de área separado por un guión de los otros 7 dígitos, ejemplo: 0412-8550908" placeholder="Número de su trabajo"
onkeypress="return validartelefono(event)">
Cargo: <input type="text" name="cargo" maxlength="25" size="15" tittle="Si no posee empleo dejar línea en blanco." placeholder="Solo si aplica.">
</p> <!--Trabajo-->
<p>
Dirección de trabajo: <input type="text" name="direcciontrab" maxlength="45"size="96" placeholder="Ubicación de su trabajo.">
</p> <!--Dirección de Trabajo-->
</fieldset> <!--Datos de Trabajo-->
<fieldset>
<legend><b>Estudios</b></legend>
<p>
Institución donde cursó el último año de Educación Media: <input type="text" name="colegio" id="colegio" maxlength="30" size="62" required placeholder="Nombre de la institución.">
</p> <!--Colegio de egreso-->
<p>
Mención: <input type="text" name="rama" id="rama" maxlength="16" size="15" required title="Ciencias, Humanidades, etc." placeholder="Ejemplo: Ciencias.">
Parroquia: <input type="text" name="parroquiacol" id="parroquiacol" maxlength="15" size="15" required tittle="Parroquia donde se encuentra la institución." placeholder="Ejemplo: Macuto.">
Año de graduación: <input type="number" name="añodegrad" id="añodegrad" size="4" max="2019" min="1976" required title="El año debe estar entre 1976 y 2019." placeholder="Año.">
</p> <!--Detalles de egreso-->
</fieldset> <!--Datos de Estudios-->
<fieldset>
<legend><b>Selección de Carrera</b></legend>
<p>
Horario conveniente: <select name="horario" required>
<option>...</option>
<option value="Diurno">Diurno</option>
<option value="Nocturno">Nocturno</option>
</select>
Carrera que desea tomar en la Institución: <select name="carrera" required>
<option>...</option>
<option value="Relaciones Industriales">Relaciones Industriales</option>
<option value="Administracion Tributaria">Administración Tributaria</option>
<option value="Administracion Industrial">Administración Industrial</option>
<option value="Educacion Preescolar">Educación Preescolar</option>
<option value="Informatica">Informática</option>
</select>
</p>
</fieldset><!--Selección de Carrera-->
<br/>
<center> <button type="submit" class="css3button">Enviar Solicitud</button> </center>
</form>
<br/>
<br/>
</body> <!--Codigo del Formulario-->
</html>
Valora esta pregunta
0
