Now with the code that I have put, leaving the fields blank does not put the red border of the input and when I write in a field the error messages in the other fields disappear...
jQuery.noConflict();
var nombre = document.getElementById("nombre");
var correo = document.getElementById("correo");
var mensaje = document.getElementById("mensaje");
jQuery(document).on('click', '#enviar', function($)
{
jQuery("#nombre").on("input", function()
{
if(jQuery("#nombre").val().length < 4)
{
jQuery("#nombre").css("border", "3px solid red");
jQuery(".msgerror1").css("visibility", "visible");
}
else
{
jQuery("#nombre").css("border", "1px solid ");
jQuery(".msgerror1").css("visibility", "hidden");
}
});
jQuery("#correo").on("input", function()
{
if(jQuery("#correo").val().length < 4)
{
jQuery("#correo").css("border", "3px solid red");
jQuery(".msgerror1").css("visibility", "visible");
}
else
{
jQuery("#correo").css("border", "1px solid ");
jQuery(".msgerror1").css("visibility", "hidden");
}
});
jQuery("#mensaje").on("input", function()
{
if(jQuery("#mensaje").val().length == 0)
{
jQuery("#mensaje").css("border", "3px solid red");
jQuery(".msgerror1").css("visibility", "visible");
}
else
{
jQuery("#mensaje").css("border", "1px solid ");
jQuery(".msgerror1").css("visibility", "hidden");
}
});
if(jQuery("#privacidad")!== 'acepto')
{
jQuery(".msgerror1").css("visibility", "visible");
}
else
{
jQuery(".msgerror1").css("visibility", "hidden");
}
});.msgerror1
{
color: red;
visibility: hidden;
font-size: 12px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post" id="myform" ><!-- onsubmit="return enviarform();"> -->
<ul class="ulformu">
<li class="liformu">
<label for="nombre"></label>
<input name="nombre" id="nombre" type="text" placeholder="Nombre*" autofocus="" >
<p class="msgerror1">el campo nombre es obligatorio</p>
</li>
<li class="tlf liformu">
<label for="correo"></label>
<input name="correo" id="correo" type="email" placeholder="Correo*" >
<p class="msgerror1">El campo correo es obligatorio</p>
</li>
<li>
</li>
<li class="liformu">
<textarea name="mensaje" id="mensaje" placeholder="¿En que te puedo ayudar?*"></textarea>
<p class="msgerror1">el mensaje es obligatorio</p>
</li>
<li>
<input type="checkbox" name="checkbox" id="privacidad" value="acepto"> <label for="cbox2">He leído y acepto la <a target="_blank" class="po" href="http://localhost/adela/politica-de-privacidad/">política de uso de datos</a></label>
<p class="msgerror1">Tienes que aceptar la política de uso de datos</p>
</li>
<li class="liformu boton">
<input id="enviar" type="submit" value="Enviar" />
</li>
</ul>
</form>if(jQuery("#mensaje").val().length < 6)
{
jQuery("#mensaje").css("border", "3px solid red");
jQuery(".msgerror1").css("visibility", "visible");
}
else
{
jQuery("#mensaje").css("border", "1px solid ");
jQuery(".msgerror1").css("visibility", "hidden");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="liformu">
<textarea name="mensaje" id="mensaje" placeholder="¿En que te puedo ayudar?*"></textarea>
<p class="msgerror1">el mensaje es obligatorio</p>
</li>
You can see it here www.adela.insertcoinproducts.com in contact, press send without filling in any field and you will get the message and then fill in the message field and it does not disappear. I've been looking at the code for a while and I can't find the error...
With the event
input, it fires while you type in the fieldWith the event
focusis activated when you are in the fieldAs Alvaro Montoro said in the comments, if you add an event
inputyou can analyze the length of the text as you enter charactersRegarding the UPDATE in the question
All your message codes are called
msgerror1so it applies to all changes. Put individual names and you can control each one independentlyyour code is fine, maybe you just need to do an action that triggered that validation, you can do it with a keyup.