Skip to content

Instantly share code, notes, and snippets.

@aaronvanston
Created May 7, 2016 11:01
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save aaronvanston/d4ab3271c9da7262ae0788919d3003e3 to your computer and use it in GitHub Desktop.
Save aaronvanston/d4ab3271c9da7262ae0788919d3003e3 to your computer and use it in GitHub Desktop.
Bootstrap 4 + Parsley JS
$("#parsleyForm").parsley({
errorClass: 'has-danger',
successClass: 'has-success',
classHandler: function(ParsleyField) {
return ParsleyField.$element.parents('.form-group');
},
errorsContainer: function(ParsleyField) {
return ParsleyField.$element.parents('.form-group');
},
errorsWrapper: '<span class="text-help">',
errorTemplate: '<div></div>'
});
@djibe
Copy link

djibe commented Mar 23, 2018

This is for Bootstrap 3

For Bootstrap 4 use this
$("#my-form").parsley({
errorClass: 'is-invalid',
successClass: 'is-valid',
errorsWrapper: '',
errorTemplate: '',
trigger: 'change'
})/* If you want to validate fields after page loading, just add this here : .validate()*/;

See the fiddle
https://jsfiddle.net/djibe89/tu0ap111/

@SimonFricker
Copy link

SimonFricker commented Feb 6, 2019

any update for Bootstrap 4.1? So far I have this which works fine but does not work with checkboxes.

errorClass: 'is-invalid',
successClass: 'is-valid',
errorsWrapper: '<span class="invalid-feedback"></span>',
errorTemplate: '<div></div>'

@vhugogarcia
Copy link

vhugogarcia commented Apr 17, 2020

any update for Bootstrap 4.1? So far I have this which works fine but does not work with checkboxes.

errorClass: 'is-invalid',
successClass: 'is-valid',
errorsWrapper: '<span class="invalid-feedback"></span>',
errorTemplate: '<div></div>'

@SimonFricker I'm using Bootstrap 4.4.1 and this worked very good to me:
{ errorClass: 'is-invalid', successClass: 'is-valid', classHandler: function (ParsleyField) { return ParsleyField.$element; }, errorsWrapper: '<div class="invalid-feedback"></div>', errorTemplate: '<div></div>' }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment