Primera cosa que deberías hacer es colocarle un required al textarea:
<textarea
class="mensaje-textarea"
id="mensaje"
placeholder="Escriba su mensaje. Máximo 500 caracteres."
maxlength="500"
required>
</textarea>
De esta manera si el textarea no tiene contenido no va a enviarse el formulario, ademas ten en cuenta que si le colocas el atributo required, al hacer blur al textarea sin que este tenga contenido, se te colocara automáticamente un borde rojo... esto en navegadores como chrome, creo que en otros también... si no deseas usar este borde rojo del navegador si no hay contenido en el textarea, quita el required, pero entonces deberás prevenir que se envié la información de manera manual.
Ahora bien lo que dice DavElsanto es correcto, deberías colocarle un trim a las validaciones:
function validarMensaje() {
if (nombre.value.trim() == "") {
mensaje.setCustomValidity("Por favor detalle como podríamos ayudarlo");
mensaje.style.borderColor = "#E22E11";
} else if (mensaje.value.trim() != "") {
mensaje.setCustomValidity("");
mensaje.style.borderColor = "#3D8B44";
}
}
Ahora, tu bug de que cuando borras todo se te queda de todas maneras el textarea con el borde verde, se debe a que no tienes una tercera condición donde compruebes que efectivamente la cantidad de caracteres es cero o "", es decir, tu compruebas que mensaje no sea igual a "", pero no compruebas también lo contrario:
function validarMensaje() {
if (nombre.value.trim() == "") {
mensaje.setCustomValidity("Por favor detalle como podríamos ayudarlo");
mensaje.style.borderColor = "#E22E11";
} else if (mensaje.value.trim() != "") {
mensaje.setCustomValidity("");
mensaje.style.borderColor = "#3D8B44";
}else if(mensaje.value.trim() === ""){
/*No se que hace la función setCustomValidity, pero supongo que te
*permite mostrar un mensaje en pantalla*/
mensaje.setCustomValidity("Es obligatorio este contenido!");
mensaje.style.borderColor = "#E22E11";
}
}
Que de hecho teniendo en cuenta esto, también tendrías que tener el mismo problema con el campo nombre, así que te recomiendo que crees otro condicional para el caso del campo nombre, de lo contrario tendrás el mismo error pero con el campo nombre, entonces al final quedaría así:
function validarMensaje() {
if (nombre.value.trim() == "") {
mensaje.setCustomValidity("Por favor detalle como podríamos ayudarlo");
mensaje.style.borderColor = "#E22E11";
}if(nombre.value.trim() != ""){
mensaje.setCustomValidity("");
mensaje.style.borderColor = "#3D8B44";
} if (mensaje.value.trim() != "") {
mensaje.setCustomValidity("");
mensaje.style.borderColor = "#3D8B44";
}if(mensaje.value.trim() === ""){
/*No se que hace la función setCustomValidity, pero supongo que te
*permite mostrar un mensaje en pantalla*/
mensaje.setCustomValidity("Es obligatorio este contenido!");
mensaje.style.borderColor = "#E22E11";
}
}
Como vez, también habrás notado que hice de cada uno de los else if y else que hubiesen, los convertí en if, esto debido a que todos deberian ejecutarse, si pones else if seguido de un if, o un else seguido de un else if, solo se ejecutara el primero que se cumpla y no el resto... si los hubiese dejado como else ifs, lo que hubiese pasado seguramente es que te creaba el borde verde en un campo y no en el otro o viceversa, pero no en ambos, es decir, funcionaria una cosa bien pero no la otra.
required
en eltextarea
, así el formulario no será enviado si el campo está vacío.<textarea class="mensaje-textarea" id="mensaje" placeholder="Escriba su mensaje. Máximo 500 caracteres." maxlength="500" required></textarea>
$("#mensaje").on("keyup", function(){ }
, y dentro de la funcion evaluar, si el tamaño del contenido del text area es menor a 1, cambiar el borde a rojo, de lo contrario mantenerlo azulif($("#mensaje").val().length) < 1){}