select2: Original select has 'required' attribute, doesn't work fine

Hello,

I think this is the better plugin I’ve ever used 😉

My question is related to the ‘required’ attribute.

let me explain better I have a html page like this:

<form name="myForm" action="myAction" >
   <select id="myId" name="myName" required="true" >
       <option value="myvalue">An Element</option>
   </select>
   <button type="submit" >Go</button>
</form>
<script>
    $("#myId").select2({placeholder: "Select"});
</script>

When I click on the submit button of the form containing the select above, I see the internal browser’s message “Please select an element from the list”. That’s right, because I want browser shows the message.

The problem is that the message is not correctly shown, maybe caused by “display: none” of the original select when I do: $(“#myId”).select2()

Is there a way to avoid this annoyance?

thanks in advance and good job again 😉

About this issue

Original URL
State: closed
Created 12 years ago
Reactions: 8
Comments: 61 (12 by maintainers)

Commits related to this issue

HTML5 required validation Fix #128 and #1699 Places the tooltip at the right position. Tested for IE11, FF and Chrome — committed to fdaugan/select2 by fdaugan 8 years ago
HTML5 required validation (JS) Fix #128 and #1699 Transfert the required property to the Select2 input. Tested for IE11, FF and Chrome — committed to fdaugan/select2 by fdaugan 8 years ago
Merge pull request #128 from nilbus/contributing Convert a code block of non-code into the bullet list it wanted to be — committed to Gataniel/select2 by simi 9 years ago

Most upvoted comments

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

+10

stale[bot] on Mar 13, 2019

Finally I could solve it adding the following css:

.form-control.select2-hidden-accessible {
    top: 30px;
}

( I’m using select2 v4.0.3 with select2-bootstrap-theme v0.1.0-beta.9 )

😃

epineda on Mar 23, 2017

Thank you @epineda . Nice solution!

modestguy on Jan 22, 2018

I’ve a really easy fix (using it with another plugin, but should work here too): do not hide() the select, but add the following css:

position: absolute;
visibility: hidden;

This way it should show error bubbles at the right place

doits on Jun 28, 2012

this my solution for version 4.0.3 $("#select2Element").select2().prop('required', true).trigger('change');

nooralnabi on Jul 8, 2018

I just override select2 CSS

.select2-offscreen,
.select2-offscreen:focus {
  // Keep original element in the same spot
  // So that HTML5 valiation message appear in the correct position
  left: auto !important;
  top: auto !important;
}

PikachuEXE on Oct 8, 2013

Css hack solution that worked for me if someone still need it:

select.use-select-2.select2-attach-processed.required {
    display: block;
    position: absolute;
    height: 0px;
    pointer-events: none;
    border-color: transparent;
    background: transparent;
    appearance: none;
}

mac501 on Dec 22, 2020

Just so for people to understand this problem better with a fiddle!

This seems to have been fixed in version 3.5.4 in the sense an error message is shown. If you still want to reproduce the same problem in the version of select2 where this bug was prevalent. Here are the fiddles.

Problematic version : https://jsfiddle.net/bragboy/55okbL58/ @PikachuEXE’s patch (overriden styles): https://jsfiddle.net/bragboy/55okbL58/1/

bragboy on Jul 9, 2016

This is my solution:

.select2-container + select {
    position:absolute;
    display: block !important;
    visibility: hidden;
    height: 1px;
    margin-left: 10px;
    margin-top: -14px;
}

garak on Feb 3, 2015

<div style="position:relative;"><select required="required"></select></div>

.select2-offscreen[required],
.select2-offscreen[required]:focus {
    width: auto !important;
    height: auto !important;
}

vassilis on Jul 28, 2014

If the select element is contained within a div with a style of position relative works well.

<div class="contenedor-select2"><select required="required">...</select></div>

Styles
.select2-offscreen,
.select2-offscreen:focus {
    clip: rect(0 0 0 0) !important;
/*    The message is squashed and not seen.*/
/*    width: 1px !important;*/
/*    height: 1px !important;*/
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    outline: 0 !important;
    left: 0px !important;
    top: 0px !important;
}
.contenedor-select2 {
position: relative;
}

If select2 introduces the select element within the div to it, it puts the div style position relative, it will work well. It works well in Firefox and Google Chrome, did not try it in Internet Explorer. Excuse my English.

felixq on Feb 3, 2014

Thanks! unfortunately I don’t use any jquery plugin for validating my fields but only the required="true" html attribute in my html page.

Thanks again 😉

fatshotty on Jul 12, 2012