JSFiddle - React, Tailwind, and code Playground

by Michael Baas

HTML

<script src="http://parsleyjs.org/dist/parsley.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<form id="regform" class="form-horizontal" method="post">
<div class="form-group"><label class="control-label col-lg-3" for="name_k">Schüler <i class="fa fa-user fa-fw"></i></label>
<div class="col-lg-9"><input id="name_k" name="name_k" placeholder="Vor- und Nachname des Kindes (z.B: &quot;Karl Musterkind&quot;)" type="text" class="form-control col-lg-9" data-parsley-required="true" data-error-message="Bitte geben Sie Vor- und Nachname des Kindes an!" >
</div>
</div>
    <input type="Submit" class="btn btn-primary" value="Absenden">
    </form>

JavaScript

$(document).ready(function() {
    var parsleyOptions = {
  // Sets success and error class to Bootstrap class names
  successClass: 'has-success',
  errorClass: 'has-error',
 
  // Bootstrap needs success/error class to be set on parent element
  errors: {
    classHandler: function(el) {
    	console.log("Error-handler!");
    	// return el.$element.closest(".form-group");
      return el.parent();
    },
    // Set these to empty to make sure the default Parsley elements are not rendered
    errorsWrapper: '',
    errorElem: ''
  },
  listeners: {
    // Show a tooltip when a validation error occurs
    onFieldError: function (elem, constraints, parsleyField) {
      elem.tooltip({
        animation: false,
        container: 'body',
        placement: 'top',
        title: elem.data('error-message')
      });
    },
    // Hide validation tooltip if field is validated
    onFieldSuccess: function(elem, constraints, parsleyField) {
      elem.tooltip('destroy');
    }
  }
};
          $('#regform').parsley(parsleyOptions);
});