Ahora con el código que he puesto, al dejar en blanco los campos no se pone el borde rojo de los input y cuando escribo en un campo desaparecen los mensajes de error en los otros campos.......
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>
podeis verlo aqui www.adela.insertcoinproductos.com en contacto, dadle a enviar sin rellenar algun campo y os saldrá el mensaje y luego rellenad el campo mensaje y no desaparece. llevo un rato mirando el código y no encuentro el fallo......
length < 6
y en efecto 0 (no tienes nada escrito) es menor que 6 asi que el mensaje de error se muestra. Quieres que cambie en cuanto empieces a escribir¿?$("#mensaje").on("input", function() { ..... })
;