Funciones de validación de formularios en Javascript

4 de /enero01 de /2014
5m 48s
javascript
1 comentario
6778
5

Estos scripts son una buena base para reducir la carga de trabajo en el servidor, es muy importante que tengamos en cuenta que debemos validar los datos siempre en el servidor, aunque estos hayan sido validados en el cliente.

Comprobar dos campos iguales

<script>
function validar_contrasena(form) {
if(form.campo_contrasena_2.value == form.campo_contrasena_1.value) {
alert("CORRECTO");
}else{
alert("La contrasena no coincide \n Intentalo de nuevo.");
form.campo_contrasena_2.value = ""; form.campo_contrasena_2.focus();
return true;
}
}
</script>
<form name="formulario_didesweb" method="POST">
<p>contrasena: </p>
<input type="password" name="campo_contrasena_1"><br>
<p>Repetir contrasena: </p>
<input type="password" name="campo_contrasena_2"><br>
<input type="button" value="Registrarse" onClick="validar_contrasena(this.form)">
</form>

Ejemplo

contrasena:

Repetir contrasena:


Ocultar “submit”

<script>
function submit_oculto_n(form) {
if ((form.nombre.value != "") && (form.apellido.value != "")) {
form.enviar.style.visibility = "visible";
}else{
form.enviar.style.visibility = "hidden";
}
}
</script>
<form name="formulario_didesweb2" method="POST" action="">
<p>Nombre: </p>
<input type="text" name="nombre" size="20" onKeyUp="submit_oculto_n(this.form)">
<p>Apellido: </p>
<input type="text" name="apellido" size="20" onKeyUp="submit_oculto_n(this.form)">
<br>
<input type="submit" name="enviar" value="Enviar" style="visibility: hidden">
</form>

Nombre:

Apellido:


Deshabilitar “submit”

<script>
function submit_oculto(form) {
if ((form.nombre3.value != "") && (form.apellido3.value != "")) {
form.enviar3.disabled = false;
}else{
form.enviar3.disabled = true;
}
}
</script>
<form name="formulario_didesweb3" method="POST" action="pagina.htm" target="_blank">
<p>Nombre: </p>
<input type="text" name="nombre3" size="20" onKeyUp="submit_oculto(this.form)">
<p>Apellido: </p>
<input type="text" name="apellido3" size="20" onKeyUp="submit_oculto(this.form)">
<br>
<input type="submit" name="enviar3" value="Enviar" disabled>
</form>

Nombre:

Apellido:


Comprobar campos vacios

<script>
function alerta(campo) {
alert("Por favor, completa el campo "+campo)
}
function validar_formulario(form) {
if (form.nombre4.value == "") {
alerta('\"Nombre\"'); form.nombre4.focus(); return true;
}
if (form.telefono4.value == "") {
alerta('\"Teléfono\"'); form.telefono4.focus(); return true;
}
if (form.direccion4.value == "") {
alerta('\"Direccion\"'); form.direccion4.focus(); return true;
}
form.submit()
}
</script>
<form name="formulario_didesweb4" method="POST">
<p>Completa el formulario</p>
<p>Nombre: </p>
<input type="text" name="nombre4"><br>
<p>Teléfono: </p>
<input type="text" name="telefono4"><br>
<p>Direccion: </p>
<input type="text" name="direccion4"><br>
<input type="button" value="Terminar" onClick="validar_formulario(this.form)">
</form>

Completa el formulario

Nombre:

Teléfono:

Direccion:


Habilitar campos con otros campos

<script>
function bloqDesbloq() {
a = login.usuario.value
if (a != "") {
a = true;
}else{
a = false;
}
if (a == true) {
login.clave.disabled = false;
}else{
login.clave.disabled = true;
}
}
</script>
<form name="login" method="POST" action="">
Usuario: <input type="text" name="usuario" size="10" onKeyUp="bloqDesbloq()"><br>
Clave: <input type="password" name="clave" size="10" disabled>
</form>

Usuario:

Clave:


Borrar texto por defecto

<form name="formulario_didesweb5" method="POST">
<input type="text" name="usuario5" value="Usuario" onClick="formulario_didesweb5.usuario5.value=''">
<br>
<input type="password" name="contrasena5" size="6" value="123456" onClick="formulario_didesweb5.contrasena5.value=''">
</form>


Puedes ver el código de este archivo en mi cuenta de GitHub.

Valoraciones

1 valoración

  • Jeta 3 diciembre, 2020

    exelente

Tu valoración

* Tu valoración puede tardar hasta 72 horas en publicarse.

He leido y acepto el Aviso legal y condiciones de uso

Quizás te interese ...

Utilizamos cookies para mejorar tu experiencia

Utilizamos cookies propias y de terceros para personalizar el contenido, analizar nuestros servicios, ofrecer funciones de redes sociales, analizar el tráfico y mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación.

Permitir todas las cookies Configurar Política de cookies