Override default validation state handing - Bootstrap 4

[fran-worley]

What kind of issue is this? (put 'x' between the square brackets)

• Question. This issue tracker is not the place for questions. If you want to ask how to do
  something, or to understand why something isn't working the way you expect it to, use
  http://stackoverflow.com/questions/ask .
  Provide working code, starting from http://codepen.io/marcandre/pen/jqbzyN?editors=101.
  We monitor the tag parsley.js.

• Bug report. If you’ve found a bug, you must provide a minimal example in a CodePen,
  starting from http://codepen.io/marcandre/pen/jqbzyN?editors=101 .

• Feature Request. Make sure there's no good way to do what you want first;
  consider asking on http://stackoverflow.com/questions/ask first.

In Bootstrap4, you need to add the error class to both the input and its wrapping '.form-group' (errorsContainer). By default in ParsleyJS you can only define one error class handler and error/ success class.

I've hacked this for my purposes by listening to the form:validate event and injecting the additional classes but it causes issues when destroying/ resetting a parsley form as I'm unable to cleanup the additional states nicely.

Ideally, I'd like to be able to pass my own error/ success/ reset class functions into parsley to override these:

_successClass: function _successClass() {
      this._ui.validationInformationVisible = true;
      this._ui.$errorClassHandler.removeClass(this.options.errorClass).addClass(this.options.successClass);
},
_errorClass: function _errorClass() {
      this._ui.validationInformationVisible = true;
      this._ui.$errorClassHandler.removeClass(this.options.successClass).addClass(this.options.errorClass);
},
_resetClass: function _resetClass() {
      this._ui.$errorClassHandler.removeClass(this.options.successClass).removeClass(this.options.errorClass);
}

[marcandre]

Thanks for opening this request.
Indeed, it would be nice to be able to use bootstrap's convention easily.
Probably the easiest feature to add would be some options for the input's error & success classes. Care to provide a PR for this?

[fran-worley]

The only complication is that in BS4 you don't add the input class to all fields. The input class adds a feedback icon (e.g. tick, cross, warning exclamation mark), and is only designed to work with regular inputs (text, email, number, password etc.).

Hence why I thought it might be easier to just allow customisation of the actual functions that apply validation states.

Happy to help with a PR if we can agree on a suitable plan of implementation.

[marcandre]

I see. If you add the class to other inputs, does it create problems though?

[fran-worley]

It definitely messes up select boxes, particularly their custom selects. Text areas seem ok and it appears to ignore additional classes on checkboxes and radios.

[marcandre]

Ok, so I agree with you that it needs to be the developper's responsibility, but that it should be easy. There should be an example of wiki page with it.
The solution should look like:

var bs4Setter = function(isSuccess, isError) {
  return function(p) {
    if(p.$element.is('input[type!="select"]')) {
      p.$element
        .toggleClass('form-control-success', isSuccess)
        .toggleClass('form-control-danger', isError)
    }
  }
}
Parsley
  .on('field:error', bs4Setter(false, true))
  .on('field:success', bs4Setter(true, false))
  .on('field:reset', bs4Setter(false, false))

(not tested)

If I understand correctly, the above sort of works, but doesn't quite for the case of being reset, right?
If so, the solution would be to insure that field:reset is called whenever the success/failure class is removed, right?

[fran-worley]

I think this can be closed (unless you want to add it for bootstrap3 or others). As of Bootstrap 4.0.0.beta1 they have simplified validation classes:
https://getbootstrap.com/docs/4.0/components/forms/#validation

They now just require a state/ class on the element rather than the wrapper too.

[marcandre]

Closing then, if someone as a clear proposal, don't hesitate to reopen or open a new issue.