html5 required="required" on selectbox Firefox5

HTML & CSS
1

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.

2

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 :wink: ):

<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>
3

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

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

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

I’d say tooltip.

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

7

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.