INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

HTML5 number input - FF validatoin tooltip / control function

HTML5 number input - FF validatoin tooltip / control function

HTML5 number input - FF validatoin tooltip / control function

(OP)
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

Quote:

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

RE: HTML5 number input - FF validatoin tooltip / control function

What version?

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

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

Quote (1DMF)

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

RE: HTML5 number input - FF validatoin tooltip / control function

(OP)
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

RE: HTML5 number input - FF validatoin tooltip / control function

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

RE: HTML5 number input - FF validatoin tooltip / control function

(OP)
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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close