Fylo landing page with two column layout

Great challenge, although I got stuck on a certain part of it. On the "active" state example, when submitting the form with wrong input (email written incorrectly), a text "Please check your email" beneath the email input field should appear.

As far I did me research, the only way to achieve this is with JS, I did accomplish something similar and that is by using the following code:

    display: none;
    color: red;
    font-size: 14px;
    margin-top: 5px;
}

.form-control:invalid:focus+.error-message {
    display: block;
    position: absolute;
    left: 0;
    bottom: -50%;
} 

But this will bring out the message before the input is submitted or in other words before the form button is clicked. It will disappear when a correct email is written in the input field. Another thing that bothered me with this solution is that the pop message auto generated by the 'required' attribute in the email input field, covers the text message (.error-message) in Mozzila completely, in Chrome partially when it appears. 

Am I missing something? Would love to hear some thought about this.