Is there a way that I can shorten this code. They have similar condition but different codes to execute. the first one is when I keydown the element will show or hide, the second one after I click the button or submit the form, it will stop or pass the user.
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();
}
});
When multiple conditional statements have the same outcome, we can use the || operator, which is like "OR".
We can also export common checks to functions, to keep things granular, neat, and easy-to-consume.
Finally, in the "keydown" event, I introduced a guard clause, which returns the desired outcome on a satisfied condition. It's much easier to read than nested if/else statements.
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();
});