Add class to the .control-group div for twitter bootstrap

[pmeissner]

I'll just throw this out there. It would be nice if the error class could be added to the .control-group containing div to use twitter bootstraps classes. Or an example of how to implement it.

.control-group.error {
  @include formFieldState($errorText, $errorText, $errorBackground);
}

[guillaumepotier]

Hi,

Parsley is currently totally agnostic of twitter bootstrap or other templating framework. All error-related stuff is totally overridable on config. For example, your could here https://github.com/guillaumepotier/Parsley.js/blob/master/parsley.js#L885 use a custom classHandler( element ) function that will return the right DOM elem on which you want to put the error class.

I'll add code explanations on how to do that in the documentation

[pmeissner]

Awesome. I've been looking for a nice validator that is more modern than some of the older jquery versions out there.

[guillaumepotier]

I reopen this issue until I've put this in doc. Helps me not to forgot to do it ;)

[pmeissner]

If you want to play around with it http://jsfiddle.net/pmeissner/WdMu8/

[guillaumepotier]

Ok. I made a first step in doc.

Will follow up in the week, and maybe think about "classical" bootstrap integrations (tooltips, .control-group..)

[JensRantil]

Ok. I made a first step in doc.

@guillaumepotier Just curious, what changes did you make?

[guillaumepotier]

Not much though: b58c344#diff-3

Should continue and add typical customization uses-cases, with default twitter tooltip / popover for example + tests in test suite ;)

[KennyEliasson]

I just added the following to make it work with nice with bootstrap.

listeners: {
onFieldError: function (elem, constraints, ParsleyField) {
$(elem).closest('.control-group').removeClass('success').addClass('error');
},
onFieldSuccess: function (elem, constraints, ParsleyField) {
$(elem).closest('.control-group').removeClass('error').addClass('success');
}
},
errors: {
errorsWrapper: '',
errorElem: ''
},

[twickstrom]

Kenny I am doing something, however my code looks like:

listeners: {
successClass: 'success',
errorClass: 'error',
errors: {
classHandler: function (el) {
return jQuery(el).closest('.control-group');
},
errorsWrapper: '',
errorElem: ''
}
}

[KennyEliasson]

Well that was alot cleaner :)