Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

HTML5 number input - FF validatoin tooltip / control function

Status
Not open for further replies.
1DMF

1DMF

Programmer
Jan 18, 2005
8,795
GB
Hi,

I have an input of type="number" with a 'min' attribute of 5.

If I put an invalid number in the input such a 1, the on hover validation tooltip in Firefox states
Please select a value that is higher than 5
Click to expand...

huh? surely that is either '5 or higher' or 'higher than 4'.

Also if you have an invalid number in the box such as the number 1, the up arrow (increment) button doesn't work? So you cannot increase the value to a valid number using the control GUI.

Is this a know bug?

Thanks,
1DMF



"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music
 
Sort by date Sort by votes
Upvote 0 Downvote
What version?

Full support for the max/min attributes was added in FF28+


1DMF said:
Is this a know bug?
Click to expand...
You're sure that isn't in your title attribute, as there are no 'default tooltips' for input elements without a title attribute.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Upvote 0 Downvote
This is not a tooltip per sae it's the validation tooltip when you hover over a control that has invalid input in it.

I'm using FF 31.0

here is the control...
Code: 
<div>
    <label for="duration">Duration (seconds) </label>
    <input class="validate" placeholder="How long in seconds to display the banner" required="required" type="number" min="5" max="60" id="duration" name="sec" value="<tmpl_var name='sec'>" /><span class="tickcross" title="Please select how long to display the banner advert for (min:5, max:60 seconds)"></span>
</div>

There is no way whatsoever this message is coming from the title attribute as the control itself doesn't have one?



"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music
 
Upvote 0 Downvote
Looking at the source for the range validation functions for FireFox. It looks more of an omission in the "error message" than a bug.

The code takes the attribute value 'as is' rather than rather than treating it as being inclusive, by decrementing min or incrementing max for display purposes.

Start an "Issue report" thread at
Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Upvote 0 Downvote
It also doesn't allow you to increment when the control is blank / empty to start with. It increases to 1 when initially clicked, which is then an invalid input and doesn't move any further. So a non-mandatory field would require a default set to the min value for the GUI control to work. FF appears to have very flaky support for this HTML5 control, which surprises me all things considered.

Due to wanting to use the date control and no browser other than Chrome supporting it, I went back to trying polyfills.

I found the XRH2 shim doesn't work when I initially started this project, but the forms extension so far is working out, so I set the polyfill to replace the UI and now I have a correctly functioning number control in Firefox, though still no incremental GUI buttons in IE?

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller
stinkybee
  • Locked
  • Question
HTML5 Datalist not working
Replies
2
Views
485
stinkybee
stinkybee
tyutghf
  • Locked
  • Question
Hide div on input focus
Replies
2
Views
281
tyutghf
tyutghf
SteveL714
  • Locked
  • Question
Looking for HTML5 'Read More' tool
Replies
5
Views
305
SteveL714
SteveL714
chaznbs
  • Locked
  • Question
Input Number return info for html display 1
Replies
3
Views
229
chaznbs
chaznbs

Part and Inventory Search

Sponsor

Back
Top