JavaScript - Problema para validar radio buttoms en Javascript

   
Vista:

Problema para validar radio buttoms en Javascript

Publicado por Jaime (1 intervención) el 12/11/2016 10:24:58
Buenas a todos, el problema que tengo es el siguiente.

Quiero validar con javascript un formulario, y entre estas validaciones incluyo radio buttoms. El problema es que yo quiero que se valide todo en una misma función, y una vez que todas las condiciones estén correctas, que se lance un alert diciendo que el formulario fue enviado con éxito.

Fui capaz de hacerlo con dos funciones; una para los radios y otra para el resto y sí me funciona, pero no funciona como yo quiero, ya que me avisa de que faltan por marcar los radios y después ejecuta el alert diciendo que el formulario fue enviado con éxito. Y esto no tendría mucho sentido...

Os dejo aquí abajo el código para ver si me podéis echar una mano :)

Código js:

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
<script type="text/javascript">
 
		function validacion(frm){
 
			var confirmar=confirm("Está seguro de que desexa enviar o formulario? (Asegúrese de que os campos están cubertos correctamente).");
 
			if(confirmar==false){
 
				alert("Cancelado o envío do formulario.");
 
			}else{
 
				var nombre=document.getElementById('nombre').value;
				var apellidos=document.getElementById('apellidos').value;
				var nif=document.getElementById('nif').value;
 
				var fecha_nac=document.getElementById('fecha_nac').value;
				var direccion=document.getElementById('direccion').value;
				var localidad=document.getElementById('localidad').value;
 
				var concello=document.getElementById('concello').value;
				var cod_post=document.getElementById('cod_post').value;
				var provincia=document.getElementById('provincia').value;
 
				var tlf_fijo=document.getElementById('tlf_fijo').value;
				var tlf_mov=document.getElementById('tlf_mov').value;
				var email=document.getElementById('email').value;
 
				var check_acceso=document.getElementById('check_acceso').value;
				var fecha_in=document.getElementById('fecha_in').value;
				var rad_grup=document.getElementById('rad_grup').value;
				var rad_rep=document.getElementById('rad_rep').value;
 
 
				if(nombre=="" || apellidos=="" || nif=="" || direccion=="" || cod_post=="" || tlf_fijo=="" || tlf_mov=="" || email==""){
 
					alert("[ERRO] Asegúrese de que tódolos campos están cubertos.");
              		return false;
				}else if(!isNaN(nombre)){
 
					alert("[ERRO] Introduza un nome válido.");
              		return false;
				}else if(!isNaN(apellidos)){
 
					alert("[ERRO] Introduza uns apelidos válidos.");
              		return false;
				}else if(isNaN(cod_post)){
 
					alert("[ERRO] Introduza un código postal válido.");
              		return false;
				}else if(!frm.rad_grup[0].checked && !frm.rad_grup[1].checked){
 
              		alert('Seleccione unha opción en "Grupo".');
              		return false;
          		}else if(!frm.rad_rep[0].checked && !frm.rad_rep[1].checked){
 
            		alert('Seleccione unha opción en "Repetidor".');
              		return false;
          		}else if(!frm.check_acceso[0].checked && !frm.check_acceso[1].checked && !frm.check_acceso[2].checked && !frm.check_acceso[3].checked){
 
            		alert('Seleccione unha opción en "Acceso ó ciclo".');
            		return false;
				}else{
 
						alert("Formulario enviado con éxito.");
				}
			}
		}
	</script>
</html>

Código html:

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
<doctype HTML>
<html>
	<head>
		<meta charset='utf-8'>
		<title>Tarefa UD02</title>
		<link rel="stylesheet" type="text/css" href="estilos.css">
	</head>
	<body style='background-color: #E6E6E6;'>
		<h1>DATOS PERSONAIS</h1>
		<h2>DATOS ACADÉMICOS</h2>
		<form name='formulario' id='formulario' method='post' action='' onSubmit='return validar(this)'>
			<div id='contenedor1'>
				<table>
					<tr>
						<th>Nome:</th>
						<td><label for='textfield'></label>
						<input type='text' name='nombre' id='nombre' class='caja_text' placeholder='Ex: Xoan'></td>
						<th>Apelidos:</th>
						<td><label for='textfield'></label>
						<input type='text' name='apellidos' id='apellidos' class='caja_text' placeholder='Ex: Rodríguez Pérez'></td>
						<th>NIF:</th>
						<td><label for='textfield'></label>
						<input type='text' name='nif' id='nif' class='caja_text' maxlength='9' pattern='(([X-Z]{1})([-]?)(\d{7})([-]?)([A-Z]{1}))|((\d{8})([-]?)([A-Z]{1}))' placeholder='Ex: 66589734X'></td>
					</tr>
					<tr>
						<th>Data Nac:</th>
						<td><label for='textfield'></label>
						<input type='date' name='fecha_nac' id='fecha_nac' class='fecha' min='1970-01-01' max='2000-12-31' value='1995-06-17'></td>
						<th>Ender. postal:</th>
						<td><label for='textfield'></label>
						<input type='text' name='direccion' id='direccion' class='caja_text' placeholder='Ex: Pardiñas 5, Santiago de Compostela'></td>
						<th>Localidade:</th>
						<td>
							<select name='localidad' id='localidad'>
								<option>Caldas de Reis</option>
								<option>Padrón</option>
								<option>Valga</option>
								<option>Bemil</option>
								<option>Cesures</option>
								<option>Moraña</option>
								<option>Cuntis</option>
								<option></option>
							</select>
						</td>
					</tr>
					<tr>
						<th>Concello:</th>
						<td>
							<select name='concello' id='concello'>
								<option>Santiago de Compostela</option>
								<option>Padrón</option>
								<option>Valga</option>
								<option>Bemil</option>
								<option>Cesures</option>
								<option>Moraña</option>
								<option>Cuntis</option>
								<option></option>
							</select>
						</td>
						<th>CodPostal:</th>
						<td><label for='textfield'></label>
						<input type='text' name='cod_post' id='cod_post' class='caja_text' maxlength='5' placeholder='Ex: 15004'></td>
						<th>Provincia:</th>
						<td>
							<select name='provincia' id='provincia'>
								<option>A Coruña</option>
								<option>Lugo</option>
								<option>Ourense</option>
								<option>Pontevedra</option>
							</select>
						</td>
					</tr>
					<tr>
						<th>Teléfono fixo:</th>
						<td><label for='textfield'></label>
						<input type='tel' name='tlf_fij' id='tlf_fijo' class='caja_text' maxlength='9' pattern='[0-9]{9}' placeholder='Ex: 986546281'></td>
						<th>Teléfono móbil:</th>
						<td><label for='textfield'></label>
						<input type='tel' name='tlf_mov' id='tlf_mov' class='caja_text' maxlength='9' pattern='[0-9]{9}' placeholder='Ex: 629432021'></td>
						<th>E-mail:</th>
						<td><label for='textfield'></label>
						<input type='email' name='email' id='email' class='caja_text' placeholder='Ex: exemplo@gmail.com'></td>
					</tr>
				</table>
			</div>
			<div id='contenedor2'>
				<table>
					<tr>
						<th>Acceso ó ciclo</th>
						<th>Ano de inicio do ciclo</th>
						<th>Grupo</th>
						<th>Repetidor/a</th>
					</tr>
					<tr>
						<td><input type='radio' name='check_acceso' id='check_acceso' class='caja_text'>Bacharelato</td>
						<td><label for='textfield'></label>
						<input type='date' class='fecha' name='fecha_in' id='fecha_in' min='2000-01-01' max='2016-12-31' value='2014-10-06'></td>
						<td><input type='radio' name='rad_grup' id='rad_grup' class='caja_text'></td>
						<td><input type='radio' name='rad_rep' id='rad_rep' class='caja_text'>Si</td>
					</tr>
					<tr>
						<td><input type='radio' name='check_acceso' id='check_acceso' class='caja_text'>Proba de acceso</td>
						<td></td>
						<td><input type='radio' name='rad_grup' id='rad_grup' class='caja_text'></td>
						<td><input type='radio' name='rad_rep' id='rad_rep' class='caja_text'>Non</td>
					</tr>
					<tr>
						<td><input type='radio' name='check_acceso' id='check_acceso' class='caja_text'>Ciclos</td>
					</tr>
					<tr>
						<td><input type='radio' name='check_acceso' id='check_acceso' class='caja_text'>Outros</td>
					</tr>
				</table>
			</div>
			<input type='submit' id='enviar' name='enviar' value='Enviar este formulario' onclick='validacion(this)'/>
		</form>
	</body>
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 Alejandro

Problema para validar radio buttoms en Javascript

Publicado por Alejandro (21 intervenciones) el 12/11/2016 16:19:22
Una forma es que quites el onSubmit y al input submit lo cambies a button, en la llamada a la funcion envias (this.form) y en lugar de alert("formulario fue enviado con exito"); pones frm.submit();
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