Support for Bootstrap 4 validation

[Kowal0]

Hello!

Currently there is no way of using Bootstrap 4 validation properly with bootstrap-select, because it needs validation message to be in the same container as validated input (i.e. div.bootstrap-select). Would you consider implementing a way of passing an element with error/success message into select's container?

[thatmattlove]

Fair warning, I'm not really a front-end guy, so I may be doing this all wrong. But, I started using bootstrap-select on v1.13.10, so I didn't even realize that it used to support validation. So, to get around the apparent lack of support, I did the following:

Created a custom exception class:

class InputInvalid extends Error {
    constructor(validationMsg, invalidField, fieldContainer) {
      super(validationMsg, invalidField, fieldContainer);
      this.name = this.constructor.name;
      this.message = validationMsg;
      this.field = invalidField;
      this.container = fieldContainer;
    }
}

This essentially ingests the message you want to display, the relevant field, and its containing element, so that when the exception is caught something specific to the field can be done.

Then, nested under the form submit even listener, I have a try/catch block that the request passes through before actually submitting the form:

try {
    if (!queryLocation) {
      const queryLocationContainer = $('#location');
      throw new InputInvalid('A location must be selected.', queryLocationContainer, queryLocationContainer.parent());
    }
  } catch (err) {
    err.field.addClass('is-invalid');
    err.container.append(`<div class="invalid-feedback px-1">${err.message}</div>`);
    $(document).trigger('InvalidInputEvent', err.field);
    return false;
  }

In my case, I only care about checking to make sure the field actually has a value, but you could change the if (!queryLocation) statement to any condition you want, obviously. In the catch statement, the field itself is given the is-invalid class, which adds the danger border, the container is appended with the error message, and any remaining execution is halted.

This results in the select element rendering as you would expect:

Bonus - I also wanted any selection/input change made after the validation failure to make the field "reset", so that it's not blaring red while you're fixing the selection/input. So the $(document).trigger('InvalidInputEvent', err.field) statement triggers an event, and the following listener does something about it:

$(document).on('InvalidInputEvent', (e, domField) => {
  const errorField = $(domField);
  if (errorField.hasClass('is-invalid')) {
    errorField.on('keyup', () => {
      errorField.removeClass('is-invalid');
      errorField.nextAll('.invalid-feedback').remove();
    });
  }
});

In my case I only cared about this happening with an input field (so not relevant to bootstrap-select), but thought it might be useful.

Hope this helps!

[shimisnow]

In my case, I did the following:

Use css to ensure that the invalid-feedback is shown.

.was-validated .bootstrap-select .selectpicker:invalid+.dropdown-toggle+.invalid-feedback {
	display: block;
}

And jQuery to insert the invalid-feedback in the right place. In this case, element is the id/class of the select.

jQuery('<div class="invalid-feedback">message</div>').insertAfter('element+.dropdown-toggle');

[caseyjhol]

Will figure out a workaround, but this should be a lot easier in v2.0.0 with MutationObserver (#1360).

[perriard]

Any news on this feature? :-)

[saptisunil]

Hello !!Can anyone help me with this ? Here is my output I need "this value is required" below the select class. Here i have used select class = selectpicker ! Anyone knows please help me And thanks in Advance

[indramal]

No need any big codes. Just add "is-invalid" or "is-valid" bootstrap class to that <select></select>. Then add $( '.selectpicker' ).selectpicker( "refresh" );. Now you can use for Ajax also. When Ajax is success add one of above classes.

Example:

HTML Code:

<select id="test" class="selectpicker"></select>

JQuary Code:

$('#test').addClass("is-invalid");
$( '.selectpicker' ).selectpicker( "refresh" );

[nikhilcb]

$( '.selectpicker' ).selectpicker( "refresh" );

to remove the error message i tried using these but not working

$("#details").removeClass("is-invalid") $(".selectpicker").selectpicker("refresh")

[Akantor47]

I also had this problem.

Setting the is-invalid works, but removing it doesn't.

It seems like this does the job for now:

$('#test').removeClass("is-invalid");
$('#test').parent().removeClass("is-invalid");
$('#test').selectpicker('refresh');