Well today I was practicing and I found this Error reflected in the Console:
TypeError: Property 'handleEvent' is not callable.
I would like to know why it happens, I will leave my practice form here to see if they can help me solve it, I would like to know why it happens and how to fix it ...
Here the Code:
$(document).ready(function(){
//Validacion y animacion en input name
//Al usuario hacer FOCUS en el input Nombre:
$('#namei').focusin(function(){
//Hacer arriba el texto "Nombre" en el Input
$('#label1').css("top","-10px");
});
//Al usuario salir del FOCUS en el input Nombre:
$('#namei').focusout(function(){
//Si no hay nada, devolver a estado inicial
if($(this).val().length == 0){
//Estado inicial de Css
$('#label1').css("top","15px");
};
});
//Funcion para verificar el input="namei"
$('#namei').on('input',function(comprobarNombre){
//Si no hay nada, devolver a estado inicial
if($(this).val().length == 0){
//Remover Clases añadidas si el usuario agrego texto y luego lo borro
$('#label1').parent().removeClass("error ok");
//Setear mensaje personalizado de error
mensaje = "El nombre no puede estar vacío";
//Si la cantidad de letras es menor a 10 entonces...
} else if($(this).val().length < 10 ){
//Añadir Clase "error" para ADVERTIR con un color ROJO (Clase de CSS)
$('#label1').parent().addClass("error");
//
$('#label1').parent().removeClass("ok");
//
mensaje = "El nombre es muy corto";
//Si todo esta bien...
}else {
//Remover Clases añadidas si el usuario agrego texto y luego corrigio
$('#label1').parent().removeClass("error");
//Añadir Clase "ok" para indicar con un color Verde (Clase de CSS) que todo esta bien
$('#label1').parent().addClass("ok");
mensaje = "";
};
//Setear validacion personalizada
this.setCustomValidity(mensaje);
// cuando se cambie el valor del campo o sea incorrecto, mostrar/resetear mensaje
this.addEventListener("invalid", comprobarNombre);
this.addEventListener("input", comprobarNombre);
});
//
//
//Validacion y animacion en input Correo
$('#emaili').focusin(function(){
//Hacer arriba el texto "Correo" en el Input
$('#label2').css("top","-10px");
});
//Devolver el texto "Correo" a su posicion en el Input
$('#emaili').focusout(function(){
if($(this).val().length == 0){
$('#label1').parent().removeClass("error ok");
$('#label2').css("top","15px");
};
});
//Funcion para verificar el input="namei"
$('#emaili').on('input',function(comprobarEmail){
var mensaje = "";
// comprobar los posibles errores
if (this.value <= 0) {
$('#label2').parent().removeClass("error ok");
mensaje = "El email no puede estar vacío";
} else if (this.value.indexOf("@") < 0) {
$('#label2').parent().addClass("error");
mensaje = "El email debe contener una @";
} else if (this.value.indexOf(".com", this.value.indexOf("@")) < 0) {
$('#label2').parent().addClass("error");
mensaje = "El email debe terminar con '.com'";
} else {
$('#label2').parent().removeClass("error");
$('#label2').parent().addClass("ok");
}
// mostrar/resetear mensaje (el mensaje se resetea poniendolo a "")
this.setCustomValidity(mensaje);
// cuando se cambie el valor del campo o sea incorrecto, mostrar/resetear mensaje
this.addEventListener("invalid", comprobarEmail);
this.addEventListener("input", comprobarEmail);
});
//
//
//Validacion y animacion Telefono
$('#teli').focusin(function(){
//Hacer arriba el texto "Correo" en el Input
$('#label3').css("top","-10px");
});
//Devolver el texto "Correo" a su posicion en el Input
$('#teli').focusout(function(){
if($(this).val().length == 0){
$('#label3').css("top","15px");
};
});
//
$('#teli').on('input',function(){
if($(this).val().length == 0){
$('#label3').parent().removeClass("ok error");
}else if($(this).val().length < 10 ){
//Añadir Clase "error" para ADVERTIR con un color ROJO (Clase de CSS)
$('#label3').parent().addClass("error");
//
$('#label3').parent().removeClass("ok");
//
mensaje = "El numero es muy corto";
}else {
//Remover Clases añadidas si el usuario agrego texto y luego corrigio
$('#label3').parent().removeClass("error");
//Añadir Clase "ok" para indicar con un color Verde (Clase de CSS) que todo esta bien
$('#label3').parent().addClass("ok");
mensaje = "";
};
});
//
//
//
$('#texta').on('input', function(){
if($(this).val().length == 0){
$('textarea').css('border','2px solid var(--ULine)');
}else if($(this).val().length < 30 ){
//Añadir Clase "error" para ADVERTIR con un color ROJO (Clase de CSS)
$('textarea').css('border','2px solid var(--Error)');
}else {
//Añadir Clase "ok" para indicar con un color Verde (Clase de CSS) que todo esta bien
$('textarea').css('border','2px solid var(--OK)');
};
});
//
//
//Validacion CheckBox y boton de Enviar
$('#btn-form').on('click',function(event){
var namein = $('#namei').is(":valid");
var emailin = $('#emaili').is(":valid");
var texta = $('#labtexta').is('valid');
var telin = $('#teli').is('valid');
var terms = $('#terminos').is(":checked");
if(!namein && !terms && !emailin && !texta){
if(!namein){
event.preventDefault();
$('#label1').parent().addClass("error");
};
if(!terms){
event.preventDefault();
$('#terminos').parent().addClass("errorc");
};
if(!emailin){
event.preventDefault();
$('#label2').parent().addClass("error");
};
if(!texta){
event.preventDefault();
$('textarea').css('border','2px solid var(--Error)');
};
if(!telin){
event.preventDefault();
$('#label3').parent().addClass("error");
};
};
});
});/*Variables del tema CSS*/
:root {
/*Variables de Color*/
--MColor: #00A4DB;
--FontB: #262626;
--FontW: #FCFCFC;
--LBackColor: #EDF6FF;
--BackColor: #c7f1ff;
--CBackColor: #a0e7ff;
--DarkColor: #0091c2;
--SDarkColor: #006b8f;
--UDarkColor: #003d52;
--ULine: #29c9ff;
--Warning: #ff6b00;
--Error: #f02000;
--Def: #c5c5c5;
--OK: #00bd68;
/*Otras Variables*/
--FontF: 'Roboto';
--FontS: 20px;
--FontSU: 24px;
--FontSM: 16px;
--FontSN: 12px;
--bormin: 2px;
}
.cont {
width: 100%;
padding: 0px 50px 50px 50px;
}
/*Div Formulario*/
.contform {
width: 100%;
max-width: 500px;
padding: 40px;
padding-bottom: 20px;
margin: auto;
background: var(--BackColor);
box-shadow: 0px 0px 7px grey;
}
.form {
padding: 5px;
text-align: center;
}
.input_group {
margin-bottom: 32px;
position: relative;
}
.contform h2 {
text-align: center;
font-size: var(--FontSU);
margin: 0px 0px 20px 0px;
}
#h2i {
margin: 60px 0px 0px 0px;
font-size: var(--FontSN);
}
hr {
border: none;
border-bottom: 2px solid var(--DarkColor);
margin: 40px auto;
width: 90%;
}
/*Cambios Generales para la etiqueta <input> para estilo Material Desing*/
input[type="text"],
input[type="tel"],
input[type="email"] {
width: 100%;
padding: 5px 5px 5px 1px;
margin: 8px 0px;
border: none;
background: none;
border-bottom: 1px solid var(--Def);
font-family: var(--FontF);
font-size: var(--FontSM);
color: var(--UDarkColor);
/*Transicion opcional*/
transition: 1s all ease;
}
/*Cambio de estilos al estar en foco del usuario*/
input:focus,
input:active {
border-bottom: 1px solid var(--ULine);
}
.error input {
border-bottom: 1px solid var(--Error);
color: var(--Error);
}
.error label {
color: var(--Error);
}
.ok label {
color: var(--OK);
}
.ok input {
border-bottom: 1px solid var(--OK);
color: var(--OK);
}
.label {
color: var(--UDarkColor);
position: absolute;
top: 15px;
left: 1px;
font-size: var(--FontSM);
line-height: 18px;
cursor: text;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.mylabel {
top: -15px;
}
/*Cambio de tema para los Radio Buttons y Checkboxes*/
.checkbox label,
.radio label {
display: inline-block;
cursor: pointer;
color: var(--Mcolor);
position: relative;
padding: 5px 15px 5px 51px;
font-size: 1em;
border-radius: 5px;
transition: all 0.3s ease;
margin: auto;
}
.checkbox label:hover,
.radio label:hover {
background: rgba(0,147,169,0.2);
}
.checkbox label:before,
.radio label:before {
content: "";
display: inline-block;
width: 17px;
height: 17px;
position: absolute;
left: 15px;
border-radius: 50%;
background: none;
border: 3px solid var(--DarkColor);
}
.errorc label {
background: rgba(240, 32, 0, 0.3)
}
input[type="radio"],
input[type="checkbox"] {
display: none;
}
input[type="radio"]:checked + label:before,
input[type="checkbox"]:checked + label:before {
display: none;
}
input[type="radio"]:checked + label,
input[type="checkbox"]:checked + label {
padding: 5px 15px 5px 15px;
background: var(--MColor);
margin: auto;
}
.input_group {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
border: 2px solid var(--ULine);
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
}
#labtexta {
color: var(--UDarkColor);
font-size: var(--FontSM);
}
/*Cambios de estilo para el Bonto "ENVIAR"*/
input[type="submit"] {
background: var(--UDarkColor);
border-radius: 1px;
border: 2px solid var(--MColor);
color: #fff;
cursor: pointer;
display: inline-block;
padding: 15px;
width: 100%;
font-size: var(--FontSU);
transition: all 0.3s ease;
}
input[type="submit"]:hover {
background: var(--DarkColor);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="cont">
<!--Formulario Estilo Material Desing-->
<div class="contform">
<h2>FORMULARIO DE CONTACTO</h2>
<form action="" class="formulario" name="Contacto" method="get" autocomplete="off">
<div class="form">
<!--Inputs De Informacion Perosnal-->
<div class="input_group">
<input type="text" id="namei" name="nombre" required pattern=".{10,}">
<label class="label" id="label1" for="namei">Nombre y Apellido:</label>
</div>
<div class="input_group">
<input type="email" id="emaili" name="correo" required>
<label class="label" id="label2" for="emaili">Correo:</label>
</div>
<div class="input_group">
<input type="tel" id="teli" name="numero" minlength="5" maxlength="30">
<label class="label" id="label3" for="teli">Telefono (opcional):</label>
</div>
<!--Inputs De Cuadro de Texto-->
<div class="input_group">
<label for="texta" id="labtexta">Texto a Enviar:</label>
<textarea name="Texto" id="texta" cols="30" rows="10" required maxlength="300" minlength="30"></textarea>
</div>
<hr>
<!--Inputs De Verificación-->
<div class="input_group checkbox">
<input type="checkbox" name="terminos" id="terminos" value="true">
<label for="terminos">Acepto Los Terminos Y Condiciones</label>
</div>
<!--Boton de Envio-->
<input type="submit" id="btn-form" value="Enviar">
<!--Informacion extra-->
<h2 id="h2i">Jorge Acosta</h2> <br>
<a href="#">LEA NUESTRO TERMINOS Y CONDICIONES</a>
</div>
</form>
</div>
</div>EDITION:
The error happens only when writing about any of the Inputs, no matter what it is, it shows the error when typing anything.
EDITION 2:
Apparently the error is not visible to you, will it be hiding? good I leave here aca image to see what happens to me: c
