Small details make a difference

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.

functiondisableButton(){btn.classList.add('err');input.classList.add('err');errMsg.classList.add('err');// this kicks the cursor from the input which still has focusdocument.activeElement.blur();// the button here will be disabledbtn.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.

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.