Vitreo
Forms

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>