Validación de formularios en tiempo real

Creando una validación de formularios en tiempo real

Al momento de crear un formulario es necesario la validación en tiempo real del mismo para que los usuarios no puedan enviar campos vacios a la base de datos, la validación de formularios en tiempo real  consiste en controlar el formulario y no dejar que el usuario lo envié en caso de que algunos de los campos requeridos este vacío.

En esta entrada vamos a crear una validación de formularios dinámica y en tiempo real, para ello vamos a utilizar el lenguaje Java Script para interactuar con el documento en tiempo real. En temas pasados ya tratamos como validar formularios con php, validar formularios con java Script, pero en si no tratamos este tema que es la validación de formularios en tiempo real.

Ver ejemplo: Validación de formularios en tiempo real

Validación de formularios en tiempo real con Java Script

Para la validación de este formulario lo que vamos a necesitar son 2 archivos que nos permitirá controlar dicho formularios o campos de textos que vamos a rellenar en el documento HTML a uno les llamamos formularios-con-javascript.html y el otro validar-formulario.js.

Validación de formularios en tiempo real

Ahora vemos el código del primer documento que es el HTML el cual solo vamos a explicr el parámetro que le pasamos antes de enviar dicho formulario para que este pueda realizar la comprobación antes de su envio.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Validar un formulario</title>
<script src="validar-formularios.js"></script>
<style>
h1{
color:blue;
font-size:18px;
text-align:center;
}
#cuerpo{
width:400px;
margin:10px;
border:solid 1px #dadada;
border-radius:5px;}
#form{
width:250px;
margin:20px;
padding:5px;
text-align:right;
}
#text,#text2,#text3{
padding:5px;
margin:5px;
border-radius:3px;
border:solid 1px #999;
}
#error-name,#error-mail,#error-pass{
color:red;
text-align:center;
padding-left:20px;
}
#mensaje{color:#999;}
#mensaje1{color:red;}
</style>
</head><body>
<div id="cuerpo">
<div id="titulo"><h1>Validacion de formularios</h1></div>
<div id="form">
<form action="#" method="post" name="form1">
<b>Name:<input type="text" name="nombre" id="text" /></b><br />
<div id="error-name"></div>
<b>Email:<input type="text" name="email" id="text"/></b><br />
<div id="error-mail"></div>
<b>Passw:<input type="password" name="pass" id="text"/></b><br />
<div id="error-pass"></div>
<input type="button" value="validar" onclick="validarFormularios()"
id="text3"/><input type="reset" value="Resetear"
onClick="resetForm()" id="text3"/>
</form><br />
<div id="mensaje"></div>
<div id="mensaje1"></div>
</div>

</div>
</body>
</html>

Ahora colocamos el otro formulario en este caso el documento java Script que que encargar de la validación de nuestro formulario.

function validarFormularios(){
var nombre = document.form1.nombre.value;
if(nombre=="")
{
document.getElementById('error-name').innerHTML = "Falta el Nombre";
}else{
document.getElementById('error-name').innerHTML = "";
}
var email = document.form1.email.value;
if(email=="")
{
document.getElementById('error-mail').innerHTML = "Falta el E-mail";
}else{
document.getElementById('error-mail').innerHTML = "";
}
var pass = document.form1.pass.value;
if(pass=="")
{
document.getElementById('error-pass').innerHTML = "Falta el Passw";
}else{
document.getElementById('error-pass').innerHTML = "";
}
if(nombre !="" && email!="" && pass!=""){
document.getElementById('mensaje').innerHTML = 'Enviando sus datos...';
}
}
function resetForm()
{
document.getElementById('mensaje').innerHTML = '';
}

Lo que hacemos básicamente en esta validación es que si se presiono el botón este va a llamar al documento java Script que tenemos enlazados a nuestro documento HTML y buscara la función que le pasamos como parámetros en este caso

validarFormularios().

function validarFormularios(){

}

Luego dentro de esta función procedemos a la validación de los campos del formulario y para eso tenemos que ir llamando cada uno de sus campos a validar por eso le escribimos la siguiente líneas dentro de un condicionar if.

var nombre = document.form1.nombre.value;
if(nombre=="")
{
document.getElementById('error-name').innerHTML = "Falta el Nombre";
}else{
document.getElementById('error-name').innerHTML = "";
}

 

Validando nuestros campos de texto uno a uno

Lo que le decimos aquí al documento es sabes documento si el datos enviado del form1 esta vacio entonces volcadme el contenido que te voy a pasar a continuación en el div que te indico con el ID. De lo contrario en ese mismo div envíame un lugar vacio que significa que el campo contiene algún dato.

Y así lo hacemos con los demás campos agregando if parecidos pero cambiando los datos.
Ahora bien si te fijas en el documento HTML tenemos un botón reset el cual borrara todo en caso que el usuario desida presionarlo. Para este botón también hemos creado una función llamada resetForm() la cual se encargar de borrar todo el contenido del documento.

function resetForm()
{
document.getElementById('mensaje').innerHTML = '';
}

 

Algo a tener en cuenta en esta validacion de formularios

Si te fijas la función para resetear nuestro formulario solo le hemos indicado una sola acción y es que nos envié un espacio en blanco en el id que le indicamos. Con este espacio en blanco lo que le indicamos al contenido es que borre cualquier mensaje que halla en ese id para que se resetee el formulario completamente.

Ver ejemplo: Validación de formularios

Bueno espero y lo hayan entendido como siempre cualquier duda solo tiene que avisarme cualquier pregunta no tengan miedo de preguntarme que estamos aquí para ayudar.

Gracias y hasta una próxima entrada…

Validar formularios con php, html, javaScript, jquery,Validar formularios con php, html, javaScript, jquery,Validar formularios con php, html, javaScript, jquery,Validar formularios con php, html, javaScript, jquery,Validar formularios con php, html, javaScript, jquery,Validar formularios con php, html, javaScript, jquery,Validar formularios con php, html, javaScript, jquery,Validar formularios con php, html, javaScript, jquery,Validar formularios con php, html, javaScript, jquery,Validar formularios con php, html, javaScript, jquery,Validar formularios con php, html, javaScript, jquery,Validar formularios con php, html, javaScript, jquery,Validar formularios con php, html, javaScript, jquery,Validar formularios con php, html, javaScript, jquery,Validar formularios con php, html, javaScript, jquery,

Deja un comentario

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