title: How to properly position an HTML5 form validation error message after hiding an input field with jQuery?
body: <p>I have a Symfony2 form with an input "text" field that I hide with jQuery to use an autocomplete field in its place (the css of the input field is set to: "display: none"). Given that the field is required, when I try to submit the form without making a selection, I get a validation error message as expected. However, the problem I'm running into is that the HTML5 client-side validation error shows up (bubbles up) outside of the browser's window (attached to the lower left corner), instead of where the autocomplete field is located. That happens because the input field that sets the position of the error bubble is hidden.</p>
  
  <p>Is there a simple way to attach the error bubble (from HTML5 form validation) to another element so that it shows up in the correct position? Perhaps attach it to the input field's label instead of the widget? or to the "ul" element created with the jQuery plugin?
  To give a little context, I'm using the <a href="http://loopj.com/jquery-tokeninput/" rel="nofollow">Loopj Tokeninput jQuery plugin</a>, that creates a "ul" element in place of the form's input "text" field (setting the style of the latter to "display: none").</p>