Quizás para muchas personas que lean este título dirán "que fácil, eso lo hace cualquiera", no lo discuto, pero cuando estás como 3 horas para controlar el envío de un formulario con javascript y ves que no te hace caso, es para hacérselo mirar, o dejarlo anotado en un sitio, como es mi intención con este blog.
Como muchos ya sabréis es importantísimo validar los campos de un formulario HTML mediante javascript para evitar enviar una petición el servidor y que devuelva un error o un mensaje de "introduce el nombre". Hoy en día tenemos ordenadores con cierta potencia, no creo que pase nada si en lugar de enviar muchas peticiones al servidor, le enviamos menos y hacemos que el ordenador trabaje un poquito. Ello no quita que sea importante hacer validaciones en servidor, ¿por qué? muy sencillo, siempre hay un espabilado que deshabilita el javascript de la página y así envía peticiones al servidor, por lo que para ese aspecto es bueno poner las validaciones tanto en el lado del cliente como en el lado del servidor, aunque sea más faena y duplicada, aumentamos considerablemente la seguridad de nuestro formulario.
He aquí un formulario estándar:
<form action="pagina.html" method="post">
Introduce el nombre:
<input type="text" value="" id="txtNombre" />
Introduce el apellido:
<input type="text" value="" id="txtApellido" />
<input type="submit" value="Enviar" />
</form>
Y aquí un método javascript de validación estándar para éste formulario:
<script type="text/javascript">
function validarFormulario(){
var nombre = document.getElementById("txtNombre");
var apellido = document.getElementById("txtApellido");
if (nombre == "" || apellido == ""){
alert("Introduce el nombre y el apellido");
return false;
}
else{
return true;
}
}
</script>
Yo lo que hacía era ponerlo en el evento onclick del submit, craso error, este método javascript va en el evento onSubmit del formulario de la siguiente manera:
<form action="pagina.html" method="post" onSubmit="javascript: return validarFormulario();">
Introduce el nombre:
<input type="text" value="" id="txtNombre" />
Introduce el apellido:
<input type="text" value="" id="txtApellido" />
<input type="submit" value="Enviar" />
</form>
