Form error
←Design for failure. When things go wrong, you can use HTML form validation. But — as you know — never ever trust any user input, validate all data on application level. This is the same signup form in different states.
This is just one opinionated way to do this. Imagine that the form fields validate via AJAX while entering data. When everything is fine, the sign up button get’s enabled.
1. Empty
2. With errors and warnings
3. Finally valid
<div class="flex gap_m collapse-t">
<div class="span-third">
<h4 class="ma-b_xs text-clip">1. <span class="text-thin">Empty</span></h4>
<form class="gap-no">
<div class="form-box">
<label for="email" class="mini-label">Enter your e-mail</label>
<input type="email" id="email" name="email" class="input" placeholder="your@email.com" required>
</div>
<div class="form-box danger">
<label for="password" class="mini-label">Choose a safe password</label>
<input type="password" id="password" name="password" class="input" placeholder="••••••••" required min="8">
</div>
<label class="box">
<input type="checkbox" id="terms" name="terms" class="checkbox" required>
Accept the <a href="#" class="link">terms and conditions</a>
</label>
<button class="button block prime" type="submit" disabled>Sign up →</button>
</form>
</div>
<div class="span-third">
<h4 class="ma-b_xs text-clip">2. <span class="text-thin">With errors and warnings</span></h4>
<form class="gap-no">
<div class="form-box tinted-danger tinted-bg-danger">
<label for="email" class="mini-label">Enter your e-mail</label>
<input type="email" name="email" class="input" placeholder="your@email.com" required value="djtrump@trumporg.com">
<div class="mini-info shown">Already in use</div>
</div>
<div class="form-box bg-danger tinted-warn tinted-bg-warn">
<label for="password" class="mini-label">Choose a safe password</label>
<input type="password" name="password" class="input bg-warn" placeholder="•••••••••" required min="6" value="aaaaaaaa">
<div class="mini-info shown">Weak password</div>
</div>
<label class="box bg-danger tinted-danger tinted-bg-danger">
<input type="checkbox" name="terms" class="checkbox" required>
Accept the <a href="#" class="link">terms and conditions</a>
</label>
<button disabled class="button block prime" type="submit">Sign up →</button>
</form>
</div>
<div class="span-third">
<h4 class="ma-b_xs text-clip">3. <span class="text-thin">Finally valid</span></h4>
<form class="gap-no">
<div class="form-box tinted-success tinted-bg-success">
<label for="email" class="mini-label">Enter your e-mail</label>
<input type="email" id="email" name="email" class="input" placeholder="your@email.com" required value="djtrump@whitehouse.org">
</div>
<div class="form-box tinted-success tinted-bg-success">
<label for="password" class="mini-label">Choose a safe password</label>
<input type="password" id="password" name="password" class="input" placeholder="•••••••" required min="8" value="AfYYL__AjüDss">
</div>
<label class="box tinted-success tinted-bg-success">
<input type="checkbox" id="terms" name="terms" class="checkbox" required checked>
Accept the <a href="#" class="link">terms and conditions</a>
</label>
<button class="button block prime" type="submit">Sign up →</button>
</form>
</div>
</div>