@@include('./parts/head.html', { "plugin_fa_icons": true, "plugin_mdi_icons": true, "plugin_ion_icons": true, "plugin_wi_icons": true, "plugin_rickshaw": false, "plugin_nvd3": false, "plugin_flot": false, "plugin_sparkline": false, "plugin_markitup": false, "plugin_ckeditor": false, "plugin_select2": false, "plugin_dropzone": false, "plugin_tagsinput": false, "plugin_clockpicker": false, "plugin_pikaday": false, "plugin_spectrum": false, "plugin_inputmask": false, "plugin_parsley": true, "plugin_gmaps": false, "plugin_jvectormap": false, "plugin_datatables": false, "plugin_fullcalendar": false, "plugin_simpleweather": false, "plugin_prettify": true }) @@include('./parts/top-navbar.html') @@include('./parts/sidebar.html', { "page": "forms-validation", "classes": "yay-shrink yay-hide-to-small yay-gestures" })
@@include('./parts/title.html', { "title": "Validation Form", "crumbs": "
  • Dashboard
  • Forms
  • Validation Form
    • " })
    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>
    @@include('./parts/search-bar.html') @@include('./parts/chat.html') @@include('./parts/foot.html', { "copyright": true })