Awesomeness - Forms - Validation

Validation

Input Fields can be validated withouth needing a new page load. They give instant user feedback to make filling out forms easier.

Example

Input Is Required

Last Name

Input Is Valid

E-mail Address

Input Is Invalid

E-mail Address

Oops, mistyped the address?

Imports

SASS:

@import "base";
@import "imports/modules/forms";

Code

<div class="l-input-validation-example">
	<h4>Input Is Required</h4>
	<div class="form-component is-required">
		<label class="input-required" for="lastname">Last Name</label>
		<input class="space-lover" type="text" id="lastname" placeholder="Lindström-Blaumeier" required>
	</div>

<div class="l-input-validation-example">
	<h4>Input Is Valid</h4>
	<div class="form-component is-required is-ok">
		<label class="input-required" for="mailadress">E-mail Address</label>
		<input class="space-lover" type="text" id="mailadress" value="hello@email.com" required>
		<i class="fa fa--check"></i>
	</div>

<div class="l-input-validation-example">
	<h4>Input Is Invalid</h4>
	<div class="form-component is-required is-error">
		<label class="input-required" for="mailadress--error">E-mail Address</label>
		<input type="text" id="mailadress--error" value="hello@email.comm" required>
		<i class="fa fa-warning"></i>
		<p class="form-message">Oops, mistyped the address?</p>
	</div>
</div>