Recently I had a chat with my fellow web developer friend about forms and how they should not let users submit the request if required fields are missing. I was trying to fill my request for this years christmas vacation and they didn't have any validation going. I ended up adding the same data again 😔..
So why does it matter?
Form validation is important!
How often have you run into the issue of filling forms which do not have any frontend validation, might not even display where the error relies or simply won't work? I guess you know the feeling well!
The issue here is that the user usually assumes everything will be fine once they are done filling the form, but then poof everything is gone. You now have a disappointed or maybe even angry customer. At least that site made this poor cat cry.
How can you fix that?
Well let's just use required on the input!
YAY - Actually no..
You can do it, but you still don't give the user feedback at the right time! We are now at the same point that the user assumes that his filled data is correct.
So what should you do then? You could install all the fancy js libraries in order to get it to work or simply work with plain JS and CSS. Sometimes you may not need much more than what you can see in the codepen down below!
I made this codepen as proof of concept, try clicking the button without entering any values into the input. Afterwards click into the input, add something and press submit.
How the pen works
I have added an addEventListener to the button on mouseenter which will trigger a function called validateNote().
btn.addEventListener('mouseenter', validateNote)
mouseenter in this case is probably the best option to go for, as it's being triggered once the mouse enters the button (read more on event triggers here)
validateNote() checks if the value of the input is an empty string using the ternary operator. Depending on if there is any value or not it will disable or enable the button.
input.value === "" ? disableButton() : enableButton()
disableButton() will add the .err css class to the button, input and label to reveal the error message.
function disableButton() {
btn.classList.add('err');
input.classList.add('err');
errMsg.classList.add('err');
// this kicks the cursor from the input which still has focus
document.activeElement.blur();
// the button here will be disabled
btn.removeEventListener('click', submitNote, false);
}
enableButton() will do the opposite obviously! It removes the .err css class off the button, input and label to hide the error message.
function enableButton() {
btn.classList.remove('err');
input.classList.remove('err');
errMsg.classList.remove('err');
btn.addEventListener('click', submitNote, true);
}
Pro tip: Use an inner shadow on the input to prevent it from resizing, since adding a border would make the input actually bigger and your layout would start to shift.
input.err {
-webkit-box-shadow:inset 0px 0px 0px 2px #f00;
-moz-box-shadow:inset 0px 0px 0px 2px #f00;
box-shadow:inset 0px 0px 0px 2px #f00;
transition: all .3s ease-in-out;
}
Another tip: Since we are working with animations here, use any easing method you would like - at least use any. Find some easing properties here
Btw, you should add labels which are visible any time for your inputs - i didn't do that in this case. But this is a different topic I will address some other time.
Tl;dr
Simply validate all required inputs before the user can submit them in the frontend, but also after the user is done filling the data to prevent any interruptions.
It helps the experience for the user in order to prevent any false expectations which then cause frustration. Telling the user at the right time what's wrong without disturbing their flow is key!
Error messages
- should display at right time and place.
- should primarily avoid confusion.
- should communicate what is happening.
- should describe how the user can fix it.
- should be short, but meaningful.
- should have right color for the message.
Taken from UX Stackexchange
This is the beginning of me trying to figure out how to make big improvements with small details, stay tuned!
I am always happy to improve myself, so feel free to help out! Thanks for my fellow discord people who helped me to improve this article already :d
Top comments (4)
Small details that matter the most. I didn't even think of the UX impact validating each input field has until compared to validating all fields at once. I just imagined myself rushing to complete registration and being constantly disturbed a couple of times.
It's important to do it at the right time! As i mentioned, once the user is done and tries to click the button, the validation could happen as it's just in time before the feedback comes that he actually submitted the form.
Why do you suggest using
mouseenteras the trigger? What about people using keyboard to navigate, or a touch device?I didn't think of the touch/keyboard users yet, but i will make sure to add that part - or try figuring out how to do it then. Thanks for the input!