Buenas,
Soy nuevo, así que perdonad si meto la pata.
Tengo una duda: debo hacer un formulario que valide datos y después los meta en una base de datos.
Trabajo la validación en javascript (me lo exigen en una práctica) El problema es que cuando action conduce a otra página, se salta la validación y pasa directamente a la página php (o a la que sea).
Mi pregunta es: ¿qué me falta incluir en el formulario para que la orden sea: tras presionar el botón enviar primero lanza la función para validar y sólo si se cumple correctamente y no hay errores, pasa hacia la otra página?
Gracias
Pego el código
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Página de registro</title>
<link href="estilos.css" rel="stylesheet" type="text/css" media="screen" />
<script>
function enviar()
{
<!--recogida de variables-->
var name = document.getElementById("nombre").value;
var user = document.getElementById("usuario").value;
var correo = document.getElementById ("email").value;
var posarroba = correo.indexOf("@"); <!--Asignamos a una variable la posicion del carácter-->
var pospunto = correo.lastIndexOf(".");
var contra1 = document.getElementById("pass1").value;
var contra2 = document.getElementById("pass2").value;
var year = document.getElementById("año").selectedIndex;
var day = document.getElementById("dia").selectedIndex;
var month = document.getElementById("mes").selectedIndex;
<!--Validación de los campos del formulario-->
if (name==null || name == "")
{
document.getElementById("error").innerHTML = "Este campo no puede estar vacio";
}
if (user==null || user == "")
{
document.getElementById("error2").innerHTML = "Este campo no puede estar vacio";
}
if (posarroba<1 || pospunto<posarroba+2 || pospunto+2>=correo.length)
{
document.getElementById("error3").innerHTML = "El correo esta mál escrito";
}
if (contra1.length <= 6)
{
document.getElementById("error4").innerHTML = "Escribe como mínimo seis letras";
}
if (contra1 != contra2)
{
document.getElementById("error5").innerHTML = "Las claves no son iguales";
}
if (year==null || year==0 || month==null || month==0 || day==null || day==0)
{
document.getElementById("error6").innerHTML = "Tienes que escoger una fecha de nacimiento";
return 0;
}
}
</script>
</head>
<body>
<h1 class="titular"> Crea tu usuario </h1>
<form class="formulario" id="registro" action="registro_aceptado.php" method="post">
<fieldset>
<legend> *Campos obligatorios </legend>
<div>
<label for="nombre">Tu nombre:</label>
<input type="text" name="nombre"><p class="fallos" id="error"></p><br />
</div>
<div>
<label for="usuario">Tu usuario:</label>
<input type="text" name="usuario"><p class="fallos" id="error2"></p><br />
</div>
<div>
<label for="email">Tu email:</label>
<input type="text" name="email"><p class="fallos" id="error3"></p><br /><br />
</div>
<div>
<label for="contraseña">Tu contraseña:</label>
<input type="password" name="pass1"><p class="fallos" id="error4"></p><br />
</div>
<div>
<label for="contraseña2">Vuelve a escribir tu contraseña:</label>
<input type="password" name="pass2"><p class="fallos" id="error5"></p><br />
</div>
<div>
<label for="fecha">Fecha de nacimiento:</label>
<select name="dia">
<option value="">-Día-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="mes">
<option value="">-Mes-</option>
<option value="enero">enero</option>
<option value="febrero">febrero</option>
<option value="marzo">marzo</option>
<option value="abril">abril</option>
<option value="mayo">mayo</option>
<option value="junio">junio</option>
<option value="1">julio</option>
<option value="1">agosto</option>
<option value="1">sepiembre</option>
<option value="1">octubre</option>
<option value="1">noviembre</option>
<option value="1">diciembre</option>
</select>
<select name="año">
<option value="">-Año-</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
</select><p class="fallos" id="error6"></p><br />
</div>
<div>
<label for="sexo">¿Cuál es tu sexo?</label><br />
Mujer <input type="radio" name="sexo" value="mujer" checked>
Hombre <input type="radio" name="sexo" value="hombre"><br />
</div>
<button onclick="enviar()">¡Registrarme!</button><input type="reset" value="Borrar">
</form>
</fieldset>
<br />
</body>
</html>
