G-Loot DS — text input validation

by Augustin Hiebel

HTML

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

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

<!-- Attention -->
<div className='form-group' data-attention="The text contains 3 spelling mistakes.">
  <label htmlFor="about">About</label>
  <textarea id="about" name="about" rows="4" placeholder="you@example.com"></textarea>
</div>