Validación de formularios sin plugin

Validar si hay algo escrito

if($(".required").val() == "")
Validar si hay algo escrito

Validar si hay algo escrito II

if($.trim($(".required").val()) == "")
Validar si hay algo escrito con trim

Validar si es un número

if(isNaN($(".required").val()))
Validar si es un número

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.

Validar mail
if(/^\w$/.test(valor))

Validar mail II

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

Validar mail 2

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

if(/^\w+$/.test(valor))

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 3

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 4

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 5

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 6

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 mail 7

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 1

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 2

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 3

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

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...")
	}
}
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");
}
Validar formulario con repaso final
icono de mandar un mailPreguntame lo que quieras!
Pablo Monteserín
contacta conmigoPablo Monteserín

El servicio de resolución de dudas técnicas es sólo para los usuarios premium. Si tienes cualquier otra duda, usa el formulario de contacto. ¡Gracias!