I've been wrestling with this for a couple of hours but can't get it to work.
I'm using bootstrap and am trying to get Parsley.js to work with it how I'd like.
By default, error messages are displayed below the input element that is in error but I'd like them to display above the parent element.
My HTML is here...
<div class="row">
<div class="col-xs-6"><label>Reference number</label></div>
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-users fa" aria-hidden="true"></i></span>
<input class="form-control" id="user_reference" name="user_reference" placeholder="Reference" data-parsley-group="stage_1" required />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6"><label>Your surname</label></div>
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<input class="form-control" id="user_surname" name="user_surname" placeholder="Surname" data-parsley-group="stage_1" required />
</div>
</div>
</div>
I'd like the error messages to appear above the <div class="input-group">. Is that possible?
I've experimented with this javascript, but the error still appeared after the input element...
$(document).ready(function() {
$('#register_form').parsley({
trigger: 'change',
successClass: 'has-success',
errorClass: 'has-error',
classHandler: function (el) {
return el.$element.closest('.input-group');
},
errorsWrapper: '<div class="invalid-message"></div>',
errorTemplate: '<span></span>'
});
});
If you can point me in the right direction, I'd be really grateful!
