Cursos de páginas web

Curso de jQuery | Validación de formularios sin plugin

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Validar si hay algo escrito

1. Validar si hay algo escrito

if($(".required").val() == "")
Validar si hay algo escrito con jQuery | Pablo Monteserín

Ejemplo de validación de si un elemento contiene información con jQuery

2. Validar si hay algo escrito II

if($.trim($(".required").val()) == "")
Validar si hay algo escrito usando trim | Pablo Monteserín

Validación con Javascript de si hay algo escrito en un cuadro de texto

3. Validar si es un número

if(isNaN($(".required").val()))
Validar si es un número con jQuery | Pablo Monteserín

Validar si el contenido de un input es un número con jQuery

Validar mail

1. Validar mail I

Validar que hemos escrito un único carácter y que es una letra o un número.

/^ y $/ delimitan el principio y el final de la cadena.

\w representa un único carácter, que puede ser una letra o un número.

if(/^\w$/.test(valor))
Validar mail con jQuery - que haya algo escrito

Validación de un mail con Javascript

Primer paso

2. Validar mail II

Validar que hemos escrito una cadena de caracteres que pueden ser letras o números.

\w+ representa una cadena de caracteres, que pueden ser una letra o un número.

if(/^\w+$/.test(valor))
Validar mail con jQuery - si hay varias palabras

Validar un mail con jQuery

Valida si hay varias letras

3. Validar mail III

Validar que hemos escrito una cadena de caracteres que pueden ser letras o números seguida de un punto o un guión

[\.-] representa un punto o un guión.

if (/^\w+[\.-]$/.test(valor)){
Validar mail con jQuery - si hay palabra y punto

Validación del correo escrito en un cuadro de texto cuando este pierde el foco (falta completar el algoritmo de validación)

4. Validar mail IV

Validar que hemos escrito una cadena de caracteres que pueden ser letras o números seguida de un punto o un guión, seguidos de más letras o números.

if (/^\w+[\.-]\w+$/.test(valor)){
Validar mail con jQuery - si hay palabra, punto y palabra

Validación de un formulario con un plugin de jQuery

5. Validar mail V

Validar que hemos escrito una cadena de caracteres que pueden ser letras o números.

Luego puede haber escrita una sucesión de punto o guión seguidos de más letras o números, tantas veces como sea necesario

if (/^\w+([\.-]\w+)*$/.test(valor)){
Validar mail con jQuery | Pablo Monteserín

Validación de una fecha

Validación de la parte a la izquierda de la arroba

6. Validar mail VI

Validar que se cumplen todas las condiciones anteriores y que después hay escrita una Arroba.

if (/^\w+([\.-]\w+)*@$/.test(valor)){
Validar mail con jQuery - si hay arroba

Validación de un mail con expresiones regulares

Validamos si hay arroba

7. Validar mail VII – Ejercicio

Construir la validación para el dominio, teniendo en cuenta que deberá empezar por letras o números y luego puede tener un punto o un guión y más letras, luego tiene una arroba y luego texto seguido de una o varias sucesiones de un punto o guión y Texto.

Validar el dominio de un mail con jQuery | Pablo Monteserín

Validación de un cuadro de texto cuando pierde el foco

Validar fechas

1. Validar fechas I

Guardamos cada parte que compone la fecha en una variable diferente.

function validarFecha() {
	var cadena = $("#fecha").val();
	var dia = cadena.substring(0, cadena.indexOf("/"));
	var mes = cadena.substring(cadena.indexOf("/") + 1, cadena.lastIndexOf("/"));
	var anio = cadena.substring(cadena.lastIndexOf("/") + 1, cadena.length);
}
validar fechas con jQuery | Pablo Monteserín

2. Validar fechas II

Comprobamos que los días, meses y años tomen valores posibles.

function validarFecha() {
	var cadena = $(".required").val();
	var dia = cadena.substring(0, cadena.indexOf("/"));
	var mes = cadena.substring(cadena.indexOf("/") + 1, cadena.lastIndexOf("/"));
	var anio = cadena.substring(cadena.lastIndexOf("/") + 1, cadena.length);

	if(isNaN(anio) || anio.length != 4 || parseFloat(anio) < 1900)
		alert("valor del año incorrecto");
	if(isNaN(mes) || parseFloat(mes) < 1 || parseFloat(mes) > 12)
		alert("valor del mes incorrecto");
	if(isNaN(dia) || parseFloat(dia) < 1 || parseFloat(dia) > 31)
		alert("valor del día incorrecto");
Validar fechas con jQuery | Pablo Monteserín

Validación de una fecha con Javascript

3. Validar fechas III

A los condicionales que ya teníamos añadir otro que evalúe si los meses 4, 6, 8 y 11 no tienen más de 30 días y otro que evalúe que el mes 2 no tenga más de 29 días.

Validar fechas sin plugin, con jQuery

Validación de la fecha escrita en un cuadro de texto utilizando jQuery

4. Validar un formulario entero

Cuando el cuadro de texto pierda el foco, llamaremos a las siguientes funciones, según el caso:

contieneValor();
soloNumeros();
cincoNumeros();
validarFecha();
validarMail();
Validar formulario con jQuery sin repaso final

Validación de un formulario utilizando Jabascript nativo

Nombre:
Edad:
CP:
Fecha Nacimiento:
mail:

5. Validar al enviar

function validacionFinal() {
	var formularioValido = true;
	var objetosValidacion = $(".required");
	objetosValidacion.push($(".numero"));
	objetosValidacion.push($(".fiveDigits"));
	objetosValidacion.push($(".fecha"));
	objetosValidacion.push($(".mail"));
	objetosValidacion.each(function(i) {
		if($(this).attr("valido") != "true") {
			formularioValido = false;
			return false;
		}
	});
	if(formularioValido == false) {
		alert("Revise el formulario, hay datos incorrectos");
	} else {
		alert("Eviando formulario...")
	}
}
Validar formulario con jQuery con repaso final

Validación de un formulario con jQuery

Nombre:
Edad:
CP:
Fecha Nacimiento:
mail: 
function contieneValor() {
	if($(this).val() == "") {
		pintarError($(this), "El campo debe contener un valor.");
	} else {
		limpiar($(this));
	}
}
function pintarError(elemento, msg) {
	elemento.css("background", "salmon");
	elemento.next().html(msg);
	elemento.attr("valido", "false");
}
function limpiar(elemento) {
	elemento.css("background", "PaleGreen");
	elemento.next().html("");
	elemento.attr("valido", "true");
}

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.