JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://parsleyjs.org/dist/parsley.min.js"></script>
<div role='form'>
		<div class="row form-group">
			<div class="col-xs-3">
				<label title="fullname">Full Name</label>
			</div>
			<div class="col-xs-4">
				<input type="text" class='form-control' id="name" name="fullName" data-parsley-required="true" data-parsley-required-message="Please insert your name"/>
			</div>
		</div>

		<input type="submit" class= "btn btn-danger" /> 
	</div>

JavaScript

$(document).ready(function() {
    $("input[type=submit]").on('click', function() {
        validateInput();
    });
		
    function validateInput() {
        $("input[name='fullName']").parsley({
            successClass: "has-success",
            errorClass: "has-error",
            classHandler: function (el) {
                return el.$element.closest('.form-group'); //working
            },
            errorsWrapper: "<span class='help-block'></span>",
            errorTemplate: "<span></span>",
            
        });
        
        // Returns true / false if the field has been validated. Does not affect UI.
        //$("input[name='fullName']").parsley().isValid());
        
        // validate field and affects UI
        $("input[name='fullName']").parsley().validate();
    }
});