Curso de jQuery | 17. Validación de formularios sin plugin

if($(".required").val() == "")

if($.trim($(".required").val()) == "")

if(isNaN($(".required").val()))

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 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 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 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 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 que se cumplen todas las condiciones anteriores y que después hay escrita una Arroba.

if (/^\w+([\.-]\w+)*@$/.test(valor)){

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.

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);
}

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");

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.

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

contieneValor();
soloNumeros();
cincoNumeros();
validarFecha();
validarMail();

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");
}