HTML5 number input - FF validatoin tooltip / control function

[1DMF]

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

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

 

[1DMF]

As an aside - it suffer from the same issues on the upper limit boundary as well!

"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

 

[ChrisHirst]

What version?

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

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

Is this a know bug?

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

 

[1DMF]

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

<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

 

[ChrisHirst]

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

http://forums.mozillazine.org/viewforum.php?f=9

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[1DMF]

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