{{ enablePlugins('parsley,prettify') }} {% set title = "Validation Form" %} {% extends "layouts/application.html" %} {% block content %} {% include "shared/page-title.html" %}
Con uses ParsleyJS for validate forms. You can see basic usage below. Full docuemntation and examples see here http://parsleyjs.org/.
Begin to use the plugin with this step: 
<script type="text/javascript" src="assets/parsley/parsley.min.js"></script>

Validation

<form data-parsley-validate>

  <!-- Name -->
  <div class="input-field">
    <input id="input-name" type="text" required>
    <label for="input-name">Name</label>
  </div>
  <!-- /Name -->

  <!-- Email -->
  <div class="input-field">
    <input id="input-email" type="email" required>
    <label for="input-email">Email</label>
  </div>
  <!-- /Email -->

  <!-- Gender -->
  <p>
    <input name="radio-gender" type="radio" id="radio-gender-1" required />
    <label for="radio-gender-1">Male</label>
    <input name="radio-gender" type="radio" id="radio-gender-2" />
    <label for="radio-gender-2">Female</label>
  </p>
  <!-- /Gender -->
  
  <!-- Hobbies -->
  <label>Hobbies (2 minimum):</label>
  <p>
    <input name="check-hobbies" type="checkbox" id="check-skiing" value="skiing" data-parsley-mincheck="2" required />
    <label for="check-skiing">Skiing</label>
    <input name="check-hobbies" type="checkbox" id="check-running" value="running" />
    <label for="check-running">Running</label>
    <input name="check-hobbies" type="checkbox" id="check-eating" value="eating" />
    <label for="check-eating">Eating</label>
    <input name="check-hobbies" type="checkbox" id="check-sleeping" value="sleeping" />
    <label for="check-sleeping">Sleeping</label>
  </p>
  <!-- /Hobbies -->
  
  <!-- Heard -->
  <select name="heard" required>
    <option value="" disabled selected>Choose option</option>
    <option value="press">Press</option>
    <option value="internet">Internet</option>
    <option value="mouth">Word of mouth</option>
    <option value="other">Other...</option>
  </select>
  <!-- /Heard -->

  <!-- Message -->
  <div class="input-field">
    <textarea id="textarea-msg" class="materialize-textarea" name="message" data-parsley-trigger="keyup" data-parsley-minlength="20" data-parsley-maxlength="100" data-parsley-validation-threshold="10" data-parsley-minlength-message="Come on! You need to enter at least a 20 caracters long comment.." required></textarea>
    <label  for="textarea-msg">Message (20 chars min, 100 max):</label>
  </div>
  <!-- /Message -->

  <!-- Validation Button -->
  <div class="row">
    <div class="col s12">
      <button class="btn">Validate</button>
    </div>
  </div>
  <!-- /Validation Button -->

<form>
{% endblock %}