Ok, so i have searched everywhere for this but still can't get it working. No one seems to have tried it but i'm sure it can do it.
I want to use the Parsley validation plugin with my twitter bootstrap project. I have read the docs, but am still learning JQuery so it's going right over my head (i'm rationalising that it is too advanced for me at the moment).
I want to add a custom event listener to Parsley to show a popup on error instead of the ugly li's. This is what i have tried:
JQUERY
$(document).ready(function () {
$('.parsley').parsley({
successClass: 'success',
errorClass: 'error',
errors: {
classHandler: function(el) {
return $(el).closest('.form-control');
},
errorsWrapper: '<div class=\"popover fade top in\" style=\"top: -20px\"></div>',
errorElem: '<div></div>'
}
});
$('.test').parsley({
successClass: 'success',
errorClass: 'error',
errors: {
classHandler: function(el) {
return $(el).closest('.form-control');
},
errorElem: '<div></div>'
},
onFieldValidate: function ( elem ) {
// if field is not visible, do nothing.
if ( !$( elem ).is( ':visible' ) ) {
$(elem).popover({
placement : 'top',
title : 'Test',
content : '<div id="popOverBox"><h4>Test</h4></div>'
});
$(elem).popover('show');
return true;
} else {
$(elem).popover('hide');
return false;
}
}
});
});
The top function half works (only displays a bubble) was only a hack to get it working temporarily.
HTML
<head>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/lib/parsley/parsley.min.js"></script>
</head>
<form class="test" data-validate="parsley" novalidate>
<input type="text" name="test" value="test" data-required="true" data-trigger="keyup change">
</form>
Can anyone help me get this working? Note: I would prefer the bootstrap tooltip (as opposed to popover) but would be grateful if someone could help me with either.
You are doing what you shouldn't do. Looking at the Parsley docs one can see warning like this:
you must remove data-validate="parsley" auto-binding code in your forms DOM to allow you to override the default processing and use Parsley purely from javascript.
After that you can do $('.test').parsley(...).
Also note that you are hanging listeners incorrectly. The right way is to put them inside listenter: {} property just like this:
$('.test').parsley({
listeners: {
onFieldValidate: function(elem, ParsleyField) {
console.log("validate", elem);
return false;
},
onFieldError: function(elem, constraints, ParsleyField) {
console.log("error", elem);
}
}
});
Simple example could be found here
You can simple check if your form is validated or not by using following code.
$( '#formId' ).parsley( 'isValid' );
I ended up using this in conjunction with bootstrap tooltips, the below snippet adds a title to invalid fields.
parsleyContainer = Field container, this could be a <form> tag for example
var parsleyContainer = $(this).closest('.tab-pane');
$(parsleyContainer).attr('data-parsley-validate', 'true');
$(parsleyContainer).parsley({
errorsContainer: function (ParsleyField) {
return ParsleyField.$element.attr("title");
},
errorsWrapper: false,
});
if($(parsleyContainer).parsley().validate()) {
//do something is validated
}
来源：https://stackoverflow.com/questions/20072178/parsley-form-validation-event-listeners