Validaciones varias

Hola! Estoy trabajando en un formulario en el que los alumnos llenan sus datos personales y otros.
La operación es: Solicitud de títulos.
Subo al colab la misma.

Tengo que validar el mail (que sea formato mail), el teléfono (que completen solo números), la fecha de nacimiento (formato fecha) y el CUIL (números con la extensión correspondiente).
La duda es la siguiente:

  • Mail: En default.twig, en el input puse type = ‘email’. Si bien lo esta controlando, no esta manejando los mensajes de “aviso” de SIU/boostrap. Como debería manejarlo correctamente?
  • Teléfono: puse en el input del default.twig type = ‘number’, el cual solo verifica que se pongan números, pero admite los negativos. Como soluciono eso?
  • Fecha de Nacimiento: probé varios datepicker sin mucho resultados. Alguna recomendación? Deje en pagelet_formulario.js
$('input.date').datepicker({
                changeMonth: true,
                changeYear: true,
                firstDay: 0
            });
  • Y por último el CUIL, el cual deje en el código, en pagelet_formulario.js:
function ValidaCuil(formulario) {
			if (!esNumerico(formulario.numero_cuil.value) )
			{
				alert("\nEl número de cuil no puede contener letras!! .\n");
				formulario.numero_cuil.value = '';
				return (false);
			}
			if (formulario.numero_cuil.value.length == 0 ) 
			{ return true;}
			if (formulario.numero_cuil.value.length < 11 ) 
			{ alert("La longitud del cuil es incorrecta." );
			formulario.numero_cuil.value = '';
			  return false;
			}
			var suma;
			var resto;
			var verif;
			var pos = formulario.numero_cuil.value.split('');
			 
			if (! /^\d{11}$/.test(formulario.numero_cuil.value)) return false;
			 
			while (true) {
				suma = (pos[0] * 5 + pos[1] * 4 + pos[2] * 3 +
				pos[3] * 2 + pos[4] * 7 + pos[5] * 6 +
				pos[6] * 5 + pos[7] * 4 + pos[8] * 3 + pos[9] * 2);
				resto = suma % 11;
				 
				if (resto == 0) {
					verif = 0;
					break;
				} 
				else if (resto == 1 && (pos[1] == 0 || pos[6] == 7)) {
					pos[1] = 4;
					continue;
				}
				else {
					verif = 11 - resto;
					break;
				}
			}
			if (verif != pos[10] )
			{
				alert("Número de cuil incorrecto." );
				formulario.numero_cuil.value = '';
				return false;
			}
			return true;
		}	
		//Validación de datos tipo Número
		function esNumerico(valor)
		{
		    Digitos = "0123456789."

			for (var Cont=0; Cont < valor.length; Cont++) {
				X = valor.substring(Cont,Cont+1)
		        if (Digitos.indexOf(X) == -1)
					return false
		    }

			return true;
		}

lo intenté por ahí, pero sin saber como llamarlo desde el default.twig

Saludos y gracias. Andrea

Hola Andrea,

En pagelet_formulario.js en la función validar después de hacer el control sencillo de obligatoriedad podés agregar otros controles que se llamaran al intentar enviar el formulario. te paso un ejemplo para el email.


// otras validaciones
// Email
// selecciono el campo mail por medio del selector jquery haciendo referencia a su id
$email = $(‘#mail’);
if (!isValidEmailAddress($email.val())){
// Si el mail no es válido le agrega la clase css error_val que le da los estilos al campo.
$email.addClass(‘error_val’);
valido = false;
}

//Validación de email
function isValidEmailAddress(emailAddress) {
        var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
        return pattern.test(emailAddress);
}      

}//cierre inicial
)//fin

Si querés mostrar algún mensaje de error lo podés hacer agregando un contenedor en el twig con un id y agregarle contenido por medio de jquery.

$(‘#id_contenedor’).html(‘Mensaje’);

Saludos
Bruno