Funciones de validación de formularios en Javascript

4 de /enero01 de /2014

5m 48s

javascript

1 comentario

8329

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

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>

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>

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>

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>

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.