JSFiddle - React, Tailwind, and code Playground

by Michael Baas

HTML

<script src="http://parsleyjs.org/dist/parsley.js"></script>
<link rel="stylesheet" href="http://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>
<div>
	<div></div>
	<div class="footer navbar-fixed-bottom" style="font-size: 16px; font-family: sans-serif; font-weight: 400;">
		<div class="pull-left label label-info">MiServer v3.0<br>&nbsp;</div>
		<div class="pull-right label label-info">
			<i class=" fa fa-question-circle"></i> M.Baas, <i class="fa fa-phone">
			</i>0160-588 7507<br>
			<i class="fa fa-at"></i>
			<a href="mailto:[email protected]">[email protected]</a>
		</div>
	</div>
	<div class="row col-lg-6 col-xs-10 col-md-8 center-block" style="margin: 20px;">
		<h2>blabla</h2>
		<p>
		<br></p>
		<form method="post" class="form-horizontal" id="regform">
			<div class="form-group">
				<label class="control-label col-lg-3" for="kls">Klasse <i class="fa fa-tag fa-fw"></i>
				</label>
				<div class="col-lg-9">
					<select id="kls" name="kls" class="form-control input-lg" data-parsley-required="true" data-error-message="Bitte wählen Sie eine Klasse aus">
						<option value="">Bitte Klasse auswählen</option>
						<option value="5.1">5.1</option>
						<option value="5.2">5.2</option>
						<option value="5.3">5.3</option>
						<option value="5.4">5.4</option>
						<option value="5.5">5.5</option>
						<option value="5.6">5.6</option>
					</select>
				</div>
			</div>
			<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"...

JavaScript

var parsleyOptions = { 
     // Empty, as these are set directly in the error/success-Handlers below 
     successClass: '', errorClass: '',  
     // Set these to empty to make sure the default Parsley elements are not rendered
     errorsWrapper: '', errorElem: ''  
 }; 
window.Parsley.on('field:error', function (fieldInstance) {  
    arrErrorMsg = ParsleyUI.getErrorsMessages(fieldInstance); 
    errorMsg = arrErrorMsg.join(';'); 
    console.log("Fehler!"); 
    console.log(fieldInstance.$element); 
    fieldInstance.$element.popover('destroy'); 
    fieldInstance.$element.popover({ 
        container: 'body', placement: 'right', content: errorMsg });
    fieldInstance.$element.popover('show'); 
    fieldInstance.$element.closest('.form-group').removeClass('has-success');
    fieldInstance.$element.closest('.form-group').addClass('has-error');  
}); 
window.Parsley.on('field:success', function (fieldInstance) { 
    console.log("success!"); 
    console.log(fieldInstance.$element); 
    fieldInstance.$element.popover('destroy'); 
    fieldInstance.$element.closest('.form-group').removeClass('has-error');
    fieldInstance.$element.closest('.form-group').addClass('has-success'); 
});  

$(document).ready(function() { $('#regform').parsley(parsleyOptions); });