Adding Bootstrap Error Styling to a Select2

In this excellent post, Mark Leusink shows how to create a reusable control that makes it easier to create Bootstrap-styled fields with labels and field validation. While using a similar concept — computing the class of the div around a field based on whether there’s an error in the field — I found that Select2 fields need a little bit of extra work to display with the error styling.

Boostrap looks for an error class in the div surrounding a field and label and it styles them accordingly. See Mark’s post for a more detailed explanation.

This works well in general, but Select2 fields are different, because they are generated on the front end as the page is loaded. The same thing happens with dojo-enabled fields (date and time pickers, etc) — the lose some styling that you try to define when they’re rendered on the page.

Adding the error class to the div around a Select2 will not cause it to pick up error styling. However, with a little CSS, you can easily update a Select2 field to be highlighted in red if the surrounding div contains the error class.

/* Styling for Select2 with error */
div.has-error ul.select2-choices {
  border-color: rgb(185, 74, 72) !important;

This looks for a div with the error class (which is has-error in Bootstrap 3) and then locates a ul with the class select2-choices within that div. I just found this by looking at the generated html and trying classes on different elements until it worked.

The CSS sets the border color to the same color that it sets other error fields. I found that by flagging a field as an error and checking the styles that it picked up.

The good news is that these 3 lines of CSS will do the trick for any instance of a Select2 that’s contained in a div that’s flagged as an error.


I’m using Bootstrap 3, so the class names are a little different than on Mark’s page, but the concept remains the same.


11 responses to “Adding Bootstrap Error Styling to a Select2”

  1. Mark Leusink says :

    Thanks for the tip Brad! I’ll add this to the demo (with full credits of course 🙂 )

    By the way: my hosting provider is currently having DDOS issues, so the link to my demo might not work. This one should:

  2. Aravind says :

    only this css is enough or we have to include ant scripts?

    • Brad Balassaitis says :

      It only requires the CSS

      • Chris Richards says :

        Hi Brad / Mark,

        I’ve created my own custom control for the select2 plugin, which is the same as the normal text validation custom control but with my own properties. However, in both cases, the mandatory text displays when I open a form, even if the field has a value in it…

        Im sure Im missing something simple, but cant pin point it… Any idea how I can stop the validation message showing as soon as the xpage opens?

        Thanks – Also, great control – The select2 one I’ve created is identical, but simply puts the div class around it, and gives you an extra custom property to pass in the lookup code to the control

  3. Chris Richards says :

    Also, when validating, all the error message say the same.

    ie field called name and a field called address

    both fields show error text on page load (name is required, address is required)

    Firstly, I dont want these to show until I hit the save button…..

    Secondly, when I save, both fields validate and turn red etc, however the address validation message changes and both validation messages now say name is required….

    Im a little lost as to what Im doing wrong!


  4. Ben Parish says :

    This worked perfectly first time. Many thanks

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: