Como Validar Formularios Html con Javascript para Realizar Proyectos a Nivel Web...!!!
Hoy decidí facilitar este pequeño código para que lo descarguen y lo practiquen, esto para validar formularios antes de enviarlos a una base de datos hecha en Mysql...
Javascript es un lenguaje muy potente que nos brinda seguridad y fiabilidad antes de enviar datos a una base de datos..permite que los datos capturados en los formularios no se envien sin antes verificar si se han llenado todos los campos en el formulario..en caso de que no se hayan llenado todos los campos del formulario, con javascript programas cada campo para que no se envie vacio, cada vez que un campo del formulario no haya sido llenado emitira un mensaje de alerta....!!!!
ejemplo de un mensaje de alerta con javascript:
Imagen del Formulario en Html:
Aquí está el Código Html con Javascript
COPIA TODO ESTE CÓDIGO EN TU BLOG DE NOTAS, O EN TU NOTEPAD++ PARA PODER EJECUTAR EL CÓDIGO..
DESDE AQUÍ..
<html>
<head>
<title>FORMULARIO</title>
</head>
<body bgcolor="coral">
<br>
<br>
<script>
/*AQUI HAREMOS LA VALIDACION CON JAVASCRIPT, VALIDANDO CADA DATO CAPTURADO CON HTML*/
function validar(form1)
{
/*COMO PODEMOS VER LA PRIMERA VALIDACION DEL PRIMER CAMPO DEL FORMULARIO NOMBRE DE USUARIO*/
/*ESTE CODIGO SIGNIFICA: (IF) SI, EN EL FORMULARIO(FORM1) LA VARIABLE USUARIO ESTA VARIABLE ESTA DECLARADA EN HTML PARA CAPTURAR
LOS DATOS QUE SE VAYAN A INGRESAR EN EL CAMPO NOMBRE DE USUARIO.. SI EL VALOR CONTENIDO EN ESTA VARIABLE USUARIO
ES IGUAL A VACIO(VALUE=="""..ENTONCES MUESTRA UN MSJ EN PANTALLA USANDO EL ALERT
EL FORM1 ES EL NOMBRE DEL FORMULARIO DECLARADO EN HTML EN EL (FORM NAME="FORM1"*/
if(document.form1.usuario.value==""
{
alert("No se pueden Enviar los Datos Por que Falta Rellenar Todos los Campos";
return false;
}
else if(document.form1.contraseña.value==""
{
alert("No se pueden Enviar los Datos Por que Falta Rellenar Todos los Campos";
return false;
}
else if(document.form1.sexo==""
{
alert("No se pueden Enviar los Datos Por que Falta Rellenar Todos los Campos";
return false;
}
else if(document.form1.direccion==""
{
alert("No se pueden Enviar los Datos Por que Falta Rellenar Todos los Campos";
return false;
}
else if(document.form1.ciudad==""
{
alert("No se pueden Enviar los Datos Por que Falta Rellenar Todos los Campos";
return false;
}
{
return true;
}
}
</script>
<h1 align="center">Rellenar Formulario</h1>
<table align=center border="+2" bgcolor="skyblue" bordercolor=black border cellpadding=3 cellspacing=3>
<form name="form1" method="post" action="consultar.php" onsubmit="return validar()">
<tr><tr><td>NOMBRE DE USUARIO: <input type= "text" name="usuario" size="20" maxlength=50></td></tr>
<tr><tr><td>CLAVE:<input type="password" name="contraseña" maxlength=15></td></tr>
<tr><tr><td>SEXO:<input type="radio" name="sexo"> masculino
<input type="radio" name="sexo"> femenino
</td></tr>
<tr><tr><td>DIRECCIÓN: <input type= "text" name="direccion" size=50 maxlength=50></td></tr>
<tr><tr><td>CIUDAD DONDE SE ENCUENTRA:<select name="ciudad">
<option value="cum">cumaná</option>
<option value="car">caracas</option>
<option value="mat">maturín</option>
<option value="mar">maracaibo</option>
<option value="mara">maracay</option>
<option value="cor">coro</option>
<option value="val">valencia</option>
</select></td></tr>
<tr><tr><tr><tr><td> <center><input type="submit" name="enviar" value="enviar">             
<input type="reset" name="borrar" value="borrar"></center></td></tr>
</table>
</form>
</body >
</html>
HASTA AQUÍ.....!!!!
Funcionamiento del Formulario HTML con JAVASCRIPT:
link:
MUCHAS GRACIAS AMIGOS HASTA LA PROXIMA...!!!
COMENTEN, PUNTUEN, RECOMIENDEN...!!! SE LO AGRADECERÍA GRANDEMENTE..
Hoy decidí facilitar este pequeño código para que lo descarguen y lo practiquen, esto para validar formularios antes de enviarlos a una base de datos hecha en Mysql...
Javascript es un lenguaje muy potente que nos brinda seguridad y fiabilidad antes de enviar datos a una base de datos..permite que los datos capturados en los formularios no se envien sin antes verificar si se han llenado todos los campos en el formulario..en caso de que no se hayan llenado todos los campos del formulario, con javascript programas cada campo para que no se envie vacio, cada vez que un campo del formulario no haya sido llenado emitira un mensaje de alerta....!!!!
ejemplo de un mensaje de alerta con javascript:
Imagen del Formulario en Html:
Aquí está el Código Html con Javascript
COPIA TODO ESTE CÓDIGO EN TU BLOG DE NOTAS, O EN TU NOTEPAD++ PARA PODER EJECUTAR EL CÓDIGO..
DESDE AQUÍ..
<html>
<head>
<title>FORMULARIO</title>
</head>
<body bgcolor="coral">
<br>
<br>
<script>
/*AQUI HAREMOS LA VALIDACION CON JAVASCRIPT, VALIDANDO CADA DATO CAPTURADO CON HTML*/
function validar(form1)
{
/*COMO PODEMOS VER LA PRIMERA VALIDACION DEL PRIMER CAMPO DEL FORMULARIO NOMBRE DE USUARIO*/
/*ESTE CODIGO SIGNIFICA: (IF) SI, EN EL FORMULARIO(FORM1) LA VARIABLE USUARIO ESTA VARIABLE ESTA DECLARADA EN HTML PARA CAPTURAR
LOS DATOS QUE SE VAYAN A INGRESAR EN EL CAMPO NOMBRE DE USUARIO.. SI EL VALOR CONTENIDO EN ESTA VARIABLE USUARIO
ES IGUAL A VACIO(VALUE=="""..ENTONCES MUESTRA UN MSJ EN PANTALLA USANDO EL ALERT
EL FORM1 ES EL NOMBRE DEL FORMULARIO DECLARADO EN HTML EN EL (FORM NAME="FORM1"*/
if(document.form1.usuario.value==""
{
alert("No se pueden Enviar los Datos Por que Falta Rellenar Todos los Campos";
return false;
}
else if(document.form1.contraseña.value==""
{
alert("No se pueden Enviar los Datos Por que Falta Rellenar Todos los Campos";
return false;
}
else if(document.form1.sexo==""
{
alert("No se pueden Enviar los Datos Por que Falta Rellenar Todos los Campos";
return false;
}
else if(document.form1.direccion==""
{
alert("No se pueden Enviar los Datos Por que Falta Rellenar Todos los Campos";
return false;
}
else if(document.form1.ciudad==""
{
alert("No se pueden Enviar los Datos Por que Falta Rellenar Todos los Campos";
return false;
}
{
return true;
}
}
</script>
<h1 align="center">Rellenar Formulario</h1>
<table align=center border="+2" bgcolor="skyblue" bordercolor=black border cellpadding=3 cellspacing=3>
<form name="form1" method="post" action="consultar.php" onsubmit="return validar()">
<tr><tr><td>NOMBRE DE USUARIO: <input type= "text" name="usuario" size="20" maxlength=50></td></tr>
<tr><tr><td>CLAVE:<input type="password" name="contraseña" maxlength=15></td></tr>
<tr><tr><td>SEXO:<input type="radio" name="sexo"> masculino
<input type="radio" name="sexo"> femenino
</td></tr>
<tr><tr><td>DIRECCIÓN: <input type= "text" name="direccion" size=50 maxlength=50></td></tr>
<tr><tr><td>CIUDAD DONDE SE ENCUENTRA:<select name="ciudad">
<option value="cum">cumaná</option>
<option value="car">caracas</option>
<option value="mat">maturín</option>
<option value="mar">maracaibo</option>
<option value="mara">maracay</option>
<option value="cor">coro</option>
<option value="val">valencia</option>
</select></td></tr>
<tr><tr><tr><tr><td> <center><input type="submit" name="enviar" value="enviar">             
<input type="reset" name="borrar" value="borrar"></center></td></tr>
</table>
</form>
</body >
</html>
HASTA AQUÍ.....!!!!
Funcionamiento del Formulario HTML con JAVASCRIPT:
link:
MUCHAS GRACIAS AMIGOS HASTA LA PROXIMA...!!!
COMENTEN, PUNTUEN, RECOMIENDEN...!!! SE LO AGRADECERÍA GRANDEMENTE..