function validar() {
// Preparamos los campos que vamos a comprobar
var nombre = document.formulario.nombre;
var email = document.formulario.email;
var telefono = document.formulario.telefono;
var texto = document.formulario.texto;
var lista = document.formulario.lista;
var condiciones = document.formulario.condiciones;
/* Estilos para los mensajes de error.
* Se puede ingresar directamente estilos inline o una clase CSS
*/
var estilos = "background:#e62b3e; border-radius:3px; font-size:13px; color: #fff; margin-bottom: 2px; padding:2px 5px;";
// Guarda el resultado para comprobar que el campo "nombre" no esté vacío
var comprobarNombreVacio = comprobarCampoVacio(nombre);
// Guarda el resultado para comprobar que el campo "email" no esté vacío y comprobar si el email es válido
var comprobarEmailVacio = comprobarCampoVacio(email);
var validarEmail = email.value.match(/^[a-zA-Z0-9_\-]+([\.][a-zA-Z0-9_\-]+)*\@([a-zA-Z0-9\-]+\.)+([a-zA-Z0-9]{2,4})+$/);
/* Guarda el resultado para comprobar que el campo "nombre" no esté vacío
* y que sean números, espacios o los signos "(", ")" y "+"
* Esta parte podría hacerse con expresiones regulares pero a modo de práctica me pareció interesante este método para variar
*/
var comprobarTelefonoVacio = comprobarCampoVacio(telefono);
var comprobarTelefonoCaracteres = comprobarInputCaracteres(telefono, " ()+0123456789");
// Guarda el resultado para comprobar que el campo "texto" no esté vacío
var comprobarTextoVacio = comprobarCampoVacio(texto);
/* Guarda el resultado para comprobar que se seleccionó un campo de la lista
* Devuelve false si se seleccinó el primer campo, es decir, el campo no válido
*/
var listaSelectedIndex = lista.selectedIndex;
var opcionSeleccionada = lista.options[listaSelectedIndex];
var listaTexto = opcionSeleccionada.text;
var listaValor = opcionSeleccionada.value;
var validarLista = listaSelectedIndex != 0;
// Guarda el resultado para comprobar que se eligió uno de los radiobuttons y captura su valor
var inputOnOff = document.formulario.activar_desactivar;
var inputOnOffSeleccion = false;
var seleccionValor;
for (i in inputOnOff) {
if (inputOnOff[i].checked) {
inputOnOffSeleccion = true;
seleccionValor = inputOnOff[i].value;
break;
}
}
// Si el valor es "si", luego debe elegir al menos una casilla (son opciones de "si")
if (inputOnOffSeleccion == true && seleccionValor == "si") {
var onOffSubOpciones = document.getElementById("opc_checkboxs").getElementsByTagName("input");
var subOpcionSeleccion = false;
for (i in onOffSubOpciones) {
if (onOffSubOpciones[i].checked) {
subOpcionSeleccion = true;
break;
}
}
}
// Guarda el resultado para comprobar que selecconó la casilla de condiciones
var condicionesChecked = condiciones.checked;
/*
* Empieza a comprobar los resultados, se muestra un mensaje al usuario para false.
* En caso de que devuelva true, llama a la función borrarMensaje() para ocultar el mensaje en caso de que se alla mostrado antes.
* Como quiero que se muestren TODOS los mensajes de error simultaneamente,
* esta me pareció la mejor solución (espero que se entienda y que me den consejos, no estoy convencido de esto).
*/
if (! comprobarNombreVacio
|| ! comprobarEmailVacio
|| ! validarEmail
|| ! comprobarTelefonoVacio
|| ! comprobarTelefonoCaracteres
|| ! comprobarTextoVacio
|| ! validarLista
|| ! inputOnOffSeleccion
|| (seleccionValor == "si" && ! subOpcionSeleccion)
|| ! condicionesChecked) {
if (! comprobarNombreVacio) {
mostrarMensaje(nombre, "mensaje_" + nombre.name, "Debes ingresar tu nombre (estilos inline)", estilos, "before");
} else {
borrarMensaje("mensaje_" + nombre.name);
}
if (! comprobarEmailVacio) {
mostrarMensaje(email, "mensaje_" + email.name, "Debes ingresar tu email (estilos inline)", estilos, "before");
} else if (! validarEmail) {
mostrarMensaje(email, "mensaje_" + email.name, "El email no es válido (estilos inline)", estilos, "before");
} else {
borrarMensaje("mensaje_" + email.name);
}
if (! comprobarTelefonoVacio) {
mostrarMensaje(telefono, "mensaje_" + telefono.name, "Debes ingresar tu teléfono (estilos inline)", estilos, "before");
} else if (! comprobarTelefonoCaracteres) {
mostrarMensaje(telefono, "mensaje_" + telefono.name, "Carácteres no válidos (estilos inline)", estilos, "before");
} else {
borrarMensaje("mensaje_" + telefono.name);
}
if (! comprobarTextoVacio) {
mostrarMensaje(texto, "mensaje_" + texto.name, "Debes escribir un texto (estilos inline)", estilos, "before");
} else {
borrarMensaje("mensaje_" + texto.name);
}
if (! validarLista) {
mostrarMensaje(lista, "mensaje_lista", "Debes elegir tu país (estilos inline)", estilos, "before");
} else {
borrarMensaje("mensaje_lista");
}
if (! inputOnOffSeleccion) {
var opcRadioContenedor = document.getElementById("opc_on_off");
mostrarMensaje(opcRadioContenedor, "elegir_opcion", "Debes elegir una de las opciones (estilos inline)", estilos, "before");
} else if (inputOnOffSeleccion) {
borrarMensaje("elegir_opcion");
if (seleccionValor == "si" && ! subOpcionSeleccion) {
var opcCheckboxContenedor = document.getElementById("opc_checkboxs");
mostrarMensaje(opcCheckboxContenedor, "mensaje_casilla", "Debes marcar una casilla (estilos inline)", estilos, "before");
} else {
borrarMensaje("mensaje_casilla");
}
}
if (! condicionesChecked) {
mostrarMensaje(condiciones, "mensaje_condiciones", "Debes aceptar las condiciones (estilos inline)", estilos, "before");
} else {
borrarMensaje("mensaje_condiciones");
}
return false;
} else { // Si supera las validaciones, desactivar el botón y enviar el formulário
this.disabled = true;
this.value = "Enviando...";
this.form.submit();
}
}