Validation
Clear messages, shown when they help
Try it
Submit with empty fields.
Code
<form action="#" novalidate data-validate data-demo data-success="All good" data-success-text="Every field is valid.">
<div class="form-grid">
<div>
<label class="form-label" for="v-name">Name<span class="req" aria-hidden="true">*</span></label><input id="v-name" name="v-name" type="text" required class="input">
</div>
<div>
<label class="form-label" for="v-email">Email<span class="req" aria-hidden="true">*</span></label>
<div class="field">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
<input id="v-email" name="v-email" type="email" required>
</div>
</div>
<div><label class="form-label" for="v-age">Age</label><input id="v-age" name="v-age" type="number" min="18" max="120" class="input"></div>
<div><label class="form-label" for="v-site">Website</label><input id="v-site" name="v-site" type="url" placeholder="https://" class="input"></div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>