Examples

This page shows how to use Poppa to quickly add a basic client-side validation on existing forms.

User registration
* required fields

HTML 
<form action="" class="user-registration>
  <label>Login *</label>
  <input name="login" type="text" data-validation-type="alphanumeric" data-validation-length="min:3,max:35" required>
  <label>Email *</label>
  <input name="email" type="text" data-validation-type="email" required>
  <label>Password *</label>
  <input name="password" data-validation-type="password" required>
  <label>Website</label>
  <input name="website" data-validation-type="url">
  <label>Bio</label>
  <textarea name="bio" data-validation-length="min:10,max:150" data-validation-hint="Describe yourself"></textarea>
  <label>I agree to the terms of service *</label>
  <input type="checkbox" data-validation-message="You have to agree to terms of service" required>
  <button type="submit">Submit</button>
</form>
Javascript 
<script>
  $('#user-registration').validation({
	'autocomplete': 'off',
	'liveValidation': false
  });
</script>
Live validation

By default each input will become validated immediately when you start typing into the input or the input looses focus. If you don't want this feature you can set 'liveValidation': false upon plugin initiation to disable it. An example below shows the same user registration form, but with live validation active.

*required fields

HTML 
<form action="" class="user-registration>
  <label>Login *</label>
  <input name="login" type="text" data-validation-type="alphanumeric" data-validation-length="min:3,max:35" required>
  <label>Email *</label>
  <input name="email" type="text" data-validation-type="email" required>
  <label>Password *</label>
  <input name="password" data-validation-type="password" required>
  <label>Website</label>
  <input name="website" data-validation-type="url">
  <label>Bio</label>
  <textarea name="bio" data-validation-length="min:10,max:150" data-validation-hint="Describe yourself"></textarea>
  <label>I agree to the terms of service *</label>
  <input type="checkbox" data-validation-message="You have to agree to terms of service" required>
  <button type="submit">Submit</button>
</form>
Javascript 
<script>
  $('#user-registration').validation({
	'autocomplete': 'off'
  });
</script>