Validación de datos en un Formulario.

En categoría: Formularios

Este ejemplo JavaScript es muy útil para cuando queramos validar los datos en los campos del formulario que utilicemos en el sitio. En este caso se analizarán los datos introducidos y si los mismos cumplen las condiciones propuestas se pasará al envío del formulario, de otra manera saldrá un mensaje avisando que el dato introducido es nulo o incorrecto por lo que retornará al campo para su modificación.

| Descripción del ejemplo JavaScript

Información relativa al Script

Compatible con: Internet Explorer

Tamaño del Script: 2KB

Probar el Script

Temas relacionados a este Script

Validar los datos introducidos en un formulario antes del envío del mismo.

Código fuente del script:

// Creamos la función que valida los campos de formulario
function validarFormulario() {

// Creamos un filtro para la validación del Email
var valid1 = /(@.*@)|(\.\.)|(@\.)|(\.@)|(^\.)/;
var valid2 = /^.+\@(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,3}|[0-9]{1,3})(\]?)$/;

// Validamos el campo nombre comprobando que se haya escrito algún valor
	if (Formulario.Nombre.value == ""){
	alert("Tienes que ingresar un nombre.\nPuedes escribir: Anónimo"); 
	Formulario.Nombre.focus(); return;
	}

// Validamos el campo Email utilizando el filtro
	if (valid1.test(Formulario.Email.value) | !valid2.test(Formulario.Email.value)) {
	alert("Tienes que ingresar un Email válido");
	Formulario.Email.focus(); return;
	}

// Validamos el campo Numero comprobando que el dato introducido sea un número
	if (isNaN(Formulario.Numero.value) |  Formulario.Numero.value=="") {
	alert("Debes ingresar un dato numérico");
	Formulario.Numero.focus(); return;
	}

// Validamos el campo País comprobando que se ha seleccionado una opción diferente a la index0
	if (Formulario.Pais.selectedIndex==0) {
	alert("Debes especificar tu Pais");
	Formulario.Pais.focus(); return;
	}

/* Validamos el campo Cpostal comprobando que el dato introducido 
sea un número mayor o igual a 4 dígitos */
	if (Formulario.Cpostal.value.length<4 | isNaN(Formulario.Cpostal.value) |
	Formulario.Cpostal.value=="") {
	alert("El código Postal debe tener al menos 4 dígitos numéricos");
	Formulario.Cpostal.focus(); return;
	}

/* Si se han introducido todos los campos correctamente se ejecuta esta sentencia
Acá podemos enviar el formulario mediante document.formulario.submit() */
	else {
	alert("Se han validado los datos correctamente");
	}

}// Fin de la función validarFormulario()

</SCRIPT>

</HEAD>

<BODY>

<FORM name="Formulario">
<Pre>
Nombre:	<INPUT type="text" name="Nombre"><BR>
Email:	<INPUT type="text" name="Email"><BR>
Edad:	<INPUT type="text" name="Numero"><BR>
País:	<SELECT name="Pais"><OPTION selected="selected">Selecciona tu País</OPTION><BR>
		<OPTION>Argentina</OPTION><BR>
		<OPTION>España</OPTION><BR>
		<OPTION>México</OPTION><BR></SELECT>
		
Código Postal:	<INPUT type="text" name="Cpostal"><BR>
<INPUT type="button" value="Comprobar validación de dato" onClick="validarFormulario()">
</Pre>
</FORM>
	
</BODY>
</HTML>

	Temas relacionados a este Script:
	Seleccionar todo el texto de un textarea Limitar la cantidad de palabras escritas en un formulario Cambiar el tamaño de un cuadro de texto automáticamente Tabular un formulario (cambiar el foco) con la tecla Enter Verificar correcta escritura de dato en cuadro de texto Saber la posición del cursor en un cuadro de texto Agregar opciones de Cuadros de texto en el formulario

Comentarios Recibidos sobre: Validación de datos en un formulario

Admin | Enviado: Marzo 8, 2008

Durin de Argentina | Enviado: Marzo 7, 2008

Agradecemos todos los comentarios. Gracias por ayudarnos a mejorar el sitio.
Importante: Los comentarios están para ampliar el artículo propuesto en esta página, proponer o responder alguna consulta de otro visitante. En ningún caso nos hacemos responsables del contenido publicado en los comentarios. En el caso que formules una pregunta y ésta no sea respondida, puedes solicitarnos ayuda desde el formulario de ayuda aunque no te aseguramos una respuesta inmediata.