<form>
<input type="text"
id="username"
name="username"
pattern="[a-zA-Z ]{5,}"
placeholder="username"
maxlength="30"
required />
<div class="invalid">
The required user name may only be a series of alphabetical characters.
</div>
<input type="email"
id="email"
name="email"
placeholder="email"
required />
<div class="invalid">
The required email address may not include any special characters other than the '.' or '@'.
</div>
<div class="push-down-top">
<button class="btn btn-link">Cancel</button>
<button class="btn">Login</button>
</div>
</form>
input:valid + .invalid { /* Adjacent sibling selector */
visibility: hidden;
}
input:invalid + .invalid {
visibility: visible;
}
input:required {
border-bottom: 2px solid #c33;
}
input:valid {
border-bottom: transparent;
}
.invalid {
color: #999;
}