validar formularios con javascript

validar formularios con javascript

Hola amigos en esta entrada vamos a ver otro tutorial básico de cómo validar formularios con javascript, en esta parte vamos a ver como validar campos de texto para que el usuario no lo envíe en blanco.

Este tema esta mas actualizado

Para este tutorial de validar formularios con javascript vamos a necesitar un formulario en HTML el cual vamos a crear más abajo.

Validar formularios con javaScript puntos a tener en cuenta

Para crear el formulario solo tenemos que tener en cuenta varios puntos cuantos campos queremos validar para que el usuario no lo envíe vacio a nuestra base de datos, yo para crear este ejemplo lo voy hacer con 2 campos de texto y un textarea.

Nuestro código el siguiente.

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Validar Formulario con Javascript</title>
</head>
<body>
<header><h1>Validar formulario con javascript</h1></header>
<section>
<form name="formulario">
Nombre:<input type="text" name="nombre" /><br>
Correo:<input type="text" name="correo" /><br>
<textarea name="texto" cols="50" rows="5"></textarea><br>
<input type="submit" value="validar" onClick="validar()"
</form>
</section>
</body>
</html>

Si te fijas en el código anterior en el input submit hemos llamado el evento onclick el cual hace que se ejecute el código java script antes de enviarlo al servidor, con este codigo es que vamos a realizar nuestras validacion de formularios con javaScript este código java script evalúe el formulario según los parámetros que le pasemos a nuestra función validar y si no cumplen dicho requisitos entonces no lo envía en caso de que si lo cumplan entonces lo envía sin problemas Ahora lo que hacemos es que dentro de nuestra etiquetas vamos a crear nuestro codigo javascript para validar nuestro formulario javascript y asegurarnos de que los usuarios envien estos datos con algun contenido y no en blanco

Validar el formulario antes de enviar los datos

<script language="javascript">
function validar(){
if(formulario.nombre.value=='')
{
alert('Tienes que introducir un nombre');
}
if(formulario.correo.value=='')
{
alert('Tienes que escribir un correo valido');
}
if(formulario.texto.value=='')
{
alert('Tienes que escribir un texto');
}
}
</script>

Si te fijas lo que hemos creado es un script javascript muy sencillo y básico pero a la vez muy útil para aquellas personas que no quieren que se le envíen comentarios en blanco a la base de datos, no es la gran cosa pero por algo se empieza y si empezaste por ahí estoy seguro que seguras aprendiendo mucho más sobre este tema de validar formularios javascript que dicho sea de paso es bastante amplio. Más adelante les voy a enseñar como validar formularios javascript de una forma más avanzada pero creo que primero tienes que tener las bases de lo que esjavascript por eso empiezo con esta simple validacion. Bueno ahora les pongo el código HTML con el Script javascript completo para que lo prueben

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Validar Formularios Javascript</title>
<script language="javascript">
function validar(){
if(formulario.nombre.value=='')
{
alert('Tienes que introducir un nombre');
}
if(formulario.correo.value=='')
{
alert('Tienes que escribir un correo valido');
}
if(formulario.texto.value=='')
{
alert('Tienes que escribir un texto');
}
}
</script>
</head>
<body>
<header><h1>Validar formulario javascript</h1></header>
<section>
<form name="formulario">
Nombre:<input type="text" name="nombre" /><br>
Correo:<input type="text" name="correo" /><br>
<textarea name="texto" cols="50" rows="5"></textarea><br>
<input type="submit" value="validar" onClick="validar()"
</form>
</section>
</body>
</html>

Bueno amigos con esto terminamos esta parte de validar formularios javascript de una forma básica y rápida… nos vemos en la próxima entrega de cómo crear tu web.

Si el tutorial te parecio interesante dale a +1 o dejanos tu comentarios…

Comments

  1. By Anónimo

Deja un comentario

Tu dirección de correo electrónico no será publicada.