G-Loot DS — text input validation with tag

by Augustin Hiebel

HTML

<!-- Error -->
<div className="form-group" data-error>
  <label htmlFor="password">Password</label>
  <input type="password" name="password" id="password" />
  <div className="form-info">Passwords must have at least <b>8 characters</b>.</div>
</div>

<!-- Success -->
<div className="form-group" data-success>
  <label htmlFor="name">Name</label>
  <input type="text" name="name" id="name" />
  <div className="form-info">The name is <span class="icon icon-check"></span> valid.</div>
</div>

<!-- Attention -->
<div className="form-group" data-attention>
  <label htmlFor="summary">Summary</label>
  <textarea id="summary" name="summary" rows="4" placeholder=""></textarea>
  <div className="form-info">The text contains <b>3 spelling mistakes</b>.</div>
</div>