✞ ✞ ✞✞✞✞✞✞✞✞✞✞ ✞ ✞

CSS

*{
box-sizing:border-box;
}
label{
display: block;
}

button{
margin-top: 2rem;
}
input[type=‘text’]{
background-image:url(“”);
background-repeat:no-repeat;
background-size:contain;
background-position:center right;
}
/*../img/ok.png */

JAVASCRIPT

$(function() {

var campoNombre = $(“#nombre”);
var campoTelefono = $(“#telefono”);
var campoFecha = $(“#fecha”);
var botonSubmit = $(“#submit”);

botonSubmit.prop(“disabled”, true);

$(“#fecha”).datepicker({
dateFormat : “dd/mm/yy”
});

campoNombre.on(“blur”, function(evento) {
if (esValido(“alfabetico”, $(this)) == true) {
$(this).css(“background-color”, “#3399ff”);
$(this).css(“background-image”, “url(img/ok.png)”);
if(estaTodoOk()==true){
botonSubmit.prop(“disabled”, false);
}else{
botonSubmit.prop(“disabled”,true);
};
} else {
$(this).css(“background-color”, “pink”);
$(this).css(“background-image”, “url(img/false.png)”);
new Toast({
message : “Compruebe que los campos esten correctos”
});
};

});

campoCheck.on(“click”, function(evento) {
campoCheck.prev(“label”).css(“color”, “black”);
if (esValido(“check”, $(this)) == true) {
$(this).prev(“label”).css(“color”, “green”);
if(estaTodoOk()==true){
botonSubmit.prop(“disabled”, false);
}else{
botonSubmit.prop(“disabled”,true);
};

};
});

function esValido(tipoDato, objetoValidar) {

var resultado = false;

switch (tipoDato) {
case “alfabetico” :
resultado = objetoValidar.val().match(/^[a-zA-ZáéíóúÁÉÍÓÚñÑüÜ_\s]+$/);
if (resultado == null) {
resultado = false;
} else {
resultado = true;
}
break;
case “numerico”:
resultado = objetoValidar.val().match(/^[0-9]{9}$/);
if (resultado == null) {
resultado = false;
} else {
resultado = true;
};
break;
case “fecha” :
resultado = objetoValidar.val().match(/^(0[1-9]|[1-2][0-9]|3[0-1])\/(0[1-9]|1[0-2])\/(19|20)[0-9]{2}$/);
if (resultado == null) {
return false;
} else {
return true;
}
break;
case “check” :
resultado = objetoValidar.is(“:checked”);

break;
default:

};
return resultado;
};
function estaTodoOk() {
return esValido(“alfabetico”, campoNombre) && esValido(“numerico”, campoTelefono) && esValido(“fecha”, campoFecha) && esValido(“check”, campoCheck);
};

});