Styling input validation errors

Styling input validation errors

  

I was playing around with CSS a bit and I decided to create a little guide/tutorial on styling the Outsystems input validation, without the use of javascript ofcourse! (Outsystems does a few useful things we can use for this!)

So my goal is to create a tooltip box like error message, instead of directly showing the text below the input (sometimes I don't have space :( )
And to style the input a bit differently.

Outsystems uses a few classes for the input error messages, .ValidationMessage for the error message and it places a .Not_Valid class on the input element itself.

First I want to be able to select the validation message (this is only added to the DOM if it has something to show!)
We can do this as follows:

select ~ .ValidationMessage, input ~ .ValidationMessage {...} 

We are trying to get select and input elements (sadly select does not fall under the input selector)
I'm using a ~ (tilde) symbol to be able to select the .ValidationMessage after my select or input element (some custom input widgets place some content directly after the input, which makes using + useless...., if you do not use any custom widgets but only the pure inputs you can use + if you want).

I've taken the w3c example for  tooltips for the styling, so our final code for the tooltip will be as follows:

/* This is to style the black box containing the text */
select ~ .ValidationMessage, input ~ .ValidationMessage {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -60px;
}

/* This is the show a little arrow pointing to our input */
select ~ .ValidationMessage, input ~ .ValidationMessage::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

But wait, now we don't see any message!

That's correct, because we still have to toggle this message somehow (I want to do this using a hover)

So when we hover on our input, we want to show this error message, we can do this as follows:

select:hover ~ .ValidationMessage, input:hover ~ .ValidationMessage {visibility: visible;} 

You can also choose to do this with :focus or :active.

Now I want to style the input itself aswell!

Outsystems adds the .Not_Valid class to an input which has it's valid property set to false.

select.Not_Valid, input.Not_Valid {
    visibility: visible;outline: none;
    border: 1px solid rgba(255, 0, 0, 0.7);
    box-shadow: 0px 0px 10px orangered;
}

This gives it a nice little glowy effect, again you can choose to use :hover, :focus or :active to change the styling (maybe you want to make the glow blue or orange if the input is selected?)


This shows how easy it is to work with the Outsystems platform, with just a bit of CSS I can make use of the things Outsystems does for me and create some awesome styling!

*Note for this to work you need a div containing your input and have styling set on that div set to position:relative;


Original:

Result:


Resources: https://www.w3schools.com/css/css_tooltip.asp

Nice work Joey! You can create a component for this, maybe...

But I'd recommend studying a way of not forcing us to wrap the fields in a div. It should be smoother in order to have better adoption.

My congrats!

João Melo wrote:

Nice work Joey! You can create a component for this, maybe...

But I'd recommend studying a way of not forcing us to wrap the fields in a div. It should be smoother in order to have better adoption.

My congrats!


I was thinking about that, but creating a component for 3-4 style rules?

I've been trying to find out a way to use it without a div, but the tooltip needs a shared parent with the input sibling to determine it's positioning.

It is though possible to create tooltips using an attribute (and playing around with ::before and ::after), because then it can be relative to the element the attribute is set to. This however, does not work with the Outsystems validation messages :(


Example: https://medium.freecodecamp.org/a-step-by-step-guide-to-making-pure-css-tooltips-3d5a3e237346?gi=df3e551dc7d3