Small details make a difference
Tags: ux, ui, forms, javascript
Published: 2018-12-04 16:45:30

---
title: Small details make a difference
published: true
description: Add this small micro transaction to your form in order to give a better experience 
tags: ux, ui, forms, javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/u3b1sq9hlel3zsxfl32d.gif
series: small details
---

Recently I had a chat with my fellow web developer [friend](https://dev.to/nevermindtheloading) 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.

![really sad cat](https://media.giphy.com/media/71PLYtZUiPRg4/giphy.gif)


# 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.

{% codepen https://codepen.io/lost-design/pen/BGeyEr/ %}

#### How the pen works
I have added an `addEventListener` to the button on `mouseenter` which will trigger a function called `validateNote()`. 

```js
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](https://developer.mozilla.org/en-US/docs/Web/Events#Mouse_Events))

`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.

```js
input.value === "" ? disableButton() : enableButton()
```

`disableButton()` will add the `.err` css class to the button, input and label to reveal the error message.

```js
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.

```js
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.*

```css
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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Defining_transitions)


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](https://ux.stackexchange.com/questions/120939/inline-validation-on-smaller-forms)*

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*