SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question html5 required="required" on selectbox Firefox5

    hi,

    I am still not sure how to word it. It's about the small tooltip/popup that firefox5 gives for form fields (as form validation), if they have been given the property required="required".

    I have a simple form with select, textbox and button. select and textbox have the attribute required='required'. Now when i press the button, it is giving the red border around these fields. But firefox 5 gives a small popup with message 'pl fill this field'.

    For select as well as textbox I have set width as 100px. But for selectbox it is cutting the validation-popup as well. I tried to set the width as auto. But again for textbox it is working, and select it is not working.

    is it a bug is firefox5?

    Please check the screenshots for easy understanding.
    Attached Images Attached Images

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Has that hover effect been styled in any way? Using your code, it works fine for me in FF5 on Mac and PC (see attached screen shot).

    Here's the code I used (would have been nice not to have to type it all out, BTW ):

    Code:
    <form>
    <select style="width: 100px;" required="required">
    <option></option>
    <option>11</option>
    <option>22</option>
    </select>
    
    <input type="test" style="width: 100px;" required="required">
    <input type="submit" value="click here">
    </form>
    Attached Images Attached Images

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    HTML5 validation in Firefox sucks in my personal opinion, not only does it not work properly but if the form is at a given location on the page the validation tooltip follows you up and down the page.

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi Ralf,

    i tried that on other machine as well. There are no styles as well. But still the effect is looking same (half cut).

    BTW what are these called? are these validation popup or friendly messages?

    ssjogus

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry i missed to mention. if you do an hover on it, it shows correct msg as 'please select an item in the list'. But the problem occurs when you hit the submit button , without selecting any items from the list.

    ssjogus

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ssjogus View Post
    BTW what are these called?
    I'd say tooltip.

    Does the problem happen with the code I posted above? On what platform? XP? Win7?

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi ralf,

    the error is coming even with the code that you have posted. The tooltip comes fine, but the error-tooltip (when you click on submit without selectng any value) has same problems. It is in windows.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •