Skip to content
This repository

Fix HTML5 validation #308

Closed
wants to merge 2 commits into from

4 participants

Maurus Cuelenaere Igor Vaynberg Andrey Suslin
Maurus Cuelenaere

This fixes HTML5 validation popups in browsers.
Instead of hiding the , move it under the container.

This was briefly tested on Chrome, Firefox and Opera under Linux.

Under Chrome, some tags seem to overlap for ~2px; I'm guessing calling .offset() to get the absolute position of the container isn't the correct way to do.

(this should fix #128)

mcuelenaere added some commits
Maurus Cuelenaere mcuelenaere Fix HTML5 validation
This fixes HTML5 validation popups in browsers.
Instead of hiding the <select>, move it under the container.
4c6f9e5
Maurus Cuelenaere mcuelenaere Improved version, keep track of container position when resizing 3f9f686
Igor Vaynberg
Owner

shouldnt we still hide the original element? what happens if its larger then select2? i will poke from under.

Maurus Cuelenaere

The problem with that, is that (at least on Chrome) this seems to excludes the element from displaying a popup and the user is just left in the dark as to why the form didn't submit (Firefox seems to have different behaviour with display:none and visibility:hidden).

The code sets the element's dimensions to the same as the ones from the container, but a "workaround" to the sticking out could be setting it to something like {width - 2px, height - 2px}.

Andrey Suslin

@ivaynberg what about this PR? It`s really big problem when trying to submit form with HTML5 validation and select field is required and empty. You can't understand what the problem, because bubble with error doesn't show.

Igor Vaynberg
Owner

the pull request does not provide a fully working solution and will cause problems for people who do not use html5 validation. once we have a way to do it that works correctly all the time i will apply it.

any news on this issue?

Igor Vaynberg
Owner

i havent found a good solution yet.

Igor Vaynberg
Owner

lets bring this into #128

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

Showing 2 unique commits by 1 author.

Aug 08, 2012
Maurus Cuelenaere mcuelenaere Fix HTML5 validation
This fixes HTML5 validation popups in browsers.
Instead of hiding the <select>, move it under the container.
4c6f9e5
Maurus Cuelenaere mcuelenaere Improved version, keep track of container position when resizing 3f9f686
This page is out of date. Refresh to see the latest.

Showing 1 changed file with 24 additions and 1 deletion. Show diff stats Hide diff stats

  1. +24 1 select2.js
25 select2.js
@@ -492,7 +492,6 @@
492 492 // swap container for the element
493 493 this.opts.element
494 494 .data("select2", this)
495   - .hide()
496 495 .before(this.container);
497 496 this.container.data("select2", this);
498 497
@@ -512,6 +511,17 @@
512 511 this.initContainer();
513 512 this.initContainerWidth();
514 513
  514 + // make sure the container is above the element
  515 + this.opts.element.css({
  516 + position: "absolute",
  517 + "z-index": 0
  518 + });
  519 + this.container.css("z-index", 1);
  520 +
  521 + // install resize handler
  522 + // TODO: unbind at destroy
  523 + $(window).bind("resize", this.bind(this.positionElement));
  524 +
515 525 installFilteredMouseMove(this.results);
516 526 this.dropdown.delegate(resultsSelector, "mousemove-filtered", this.bind(this.highlightUnderEvent));
517 527
@@ -562,6 +572,19 @@
562 572 }
563 573
564 574 if (opts.element.is(":disabled") || opts.element.is("[readonly='readonly']")) this.disable();
  575 +
  576 + // position element
  577 + this.positionElement();
  578 + },
  579 +
  580 + positionElement: function() {
  581 + // position element where the container is
  582 + this.opts.element.css({
  583 + top: this.container.position().top,
  584 + left: this.container.position().left,
  585 + width: this.container.outerWidth(),
  586 + height: this.container.outerHeight()
  587 + });
565 588 },
566 589
567 590 // abstract

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.