Autor
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:
<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'>1º</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'>2º</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>
<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>
<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'>1º</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'>2º</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>
<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>
En línea
