¿Hay alguna manera de acortar este código? Tienen una condición similar pero diferentes códigos para ejecutar. el primero es cuando presiono el elemento, se mostrará u ocultará, el segundo después de hacer clic en el botón o enviar el formulario, se detendrá o pasará al usuario.
textInput.addEventListener("keydown", function myFunction(){ if(textInput.value.match(characters)){ invalidFeedback.style.display = "block"; } else if (textInput.value === ""){ invalidFeedback.style.display = "block"; } else { invalidFeedback.style.display = "none"; } }); form.addEventListener("submit", function (event, myFunction){ if(textInput.value.match(characters)){ event.preventDefault(); } else if (textInput.value === ""){ event.preventDefault(); } });Cuando varias declaraciones condicionales tienen el mismo resultado, podemos usar || operador, que es como "O".
También podemos exportar comprobaciones comunes a funciones, para mantener las cosas granulares, ordenadas y fáciles de usar.
Finalmente, en el evento "keydown", introduje una cláusula de protección, que devuelve el resultado deseado en una condición satisfecha. Es mucho más fácil de leer que las sentencias if/else anidadas.
const doesMatch = () => textInput.value.match(characters); const isEmpty = () => textInput.value === ""; textInput.addEventListener("keydown", () => { if (doesMatch() || isEmpty()) return invalidFeedback.style.display = "block"; invalidFeedback.style.display = "none"; }); form.addEventListener("submit", (event) => { if (doesMatch() || isEmpty()) event.preventDefault(); });