Custom Input Increments: How to customize number ranges - html

So I have some forms with html input validations like so:
<input type="number" min="1" max="50" ...
Now I need to add some custom ranges such as 1-40, 45, & 50.
Previously I've just wrote javascript to handle this but would rather just use the html input validation. Is there any way to achieve this other than checking with javascript / jquery ?
I think i can use <input pattern="regularExp" ...
This could also be an option but I have no experience in it...
Thanks

In addition to min and max, HTML5 gives you the step attribute. For example, <input type="number" min="1" max="50" step="10"> gives you acceptable values of 1, 11, 21, 31, and 41. Beyond those three attributes, there is JavaScript.
If you really do not want to use JavaScript, then you can try to use a regular expression with the pattern attribute of the input element. Note that the pattern attribute requires that your input type be set to text instead of to number and include a title that is used to describe the pattern. Also note that regular expressions are meant for parsing text character by character, which makes it difficult to deal with numbers beyond a single digit.
Here's an example that allows 1-40, 45, and 50 (but not if the number is preceded by a zero):
<input type="text" name="example-number"
pattern="(^40$)|(^45$)|(^50$)|(^1[0-9]$)|(^2[0-9]$)|(^3[0-9]$)|(^[1-9]$)"
title="A number in the range of 1-40, 45, or 50">
Plenty of people recommend using code (e.g., JavaScript) instead of a regular expression for validating numeric ranges, which may be why an entire site dedicated to input patterns does not have any listed for numeric ranges.

Related

How give pattern HTML input type?

i validation form like this:
cannot give comma
cannot give minus(-)
cannot give 0 number
cannot give blank number
cannot give dot(.) character
this is my code:
<input type="number" required min="1" step="1" pattern="^(\d+\.)?\d+$" />
how pattern to prevent that?
From what I checked, it seems that it may depend on browser. With following pattern, Chrome allows numbers only, Firefox marks numbers with coma or dot as invalid and IE allows [a-z] as well.
^([1-9]|\.|\,)+([0-9])*(\.|\,)?([0-9])*$
I would add onchange event and set it up with javascript, because I can't see pattern, which will allow/disallow 0 based on first character and will remove browsers differences. 0,1 is still number.

Make HTML5 input type="number" accepting dashes

I want to use the number input type for my HTML form.
Unfortunately it only accepts real numbers, no dashes between.
Is there a way to make the number input accepting numbers like "1234-123456789" ?
I recently had the same issue. I got around it by using type="tel" instead of type="text" or type="number". By using 'tel' I was able to get a numeric only keyboard on mobile devices and still be able to use my pattern="[0-9\-]+".
Here is the code I used. I hope this is good enough for what you need. They really need to make it so that adding a pattern attribute overrides any built in pattern set by the type attribute.
<input id='zipcode' name='zipcode' type='tel' pattern="[0-9\-]+" placeholder='Zip-code'>
Of course this will only work if all you want is dashes and possibly parentheses.
You can use a regular expression against which the value will be validated. Simply put it in the pattern attribute. You also have to change your input's type to text in order to use that.
<input type="text" pattern="[0-9]+([-\,][0-9]+)?" name="my-num"
title="The number input must start with a number and use either dash or a comma."/>
inputmode="numeric" is your new best friend..
https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/#numeric

Why doesn't the input type="number" control support the maxlength attribute?

Why doesn't the HTML 5 specification for the input type="number" control include support for the maxlength attribute?
Browsing Stack Overflow for questions matching search terms like input type number maxlength, it seems that there are quite a few web applications out there with a requirement to display a control that requires the user to input a number, but also constrains the input field to a particular maximum number of characters.
Judging from the Stack Overflow answers to these questions, it seems like the solution that most applications end up landing on is either using some manner of Javascript "hack" to limit the count of characters appearing in the control, or else to use a input type="text" control (with its longstanding support for the maxlength attribute) instead of the newer input type="number".
It seems like a cleaner solution for this common requirement would be to allow maxlength to work with input type="number" controls.
I understand that a particular max attribute value may not always correspond directly to a maxlength attribute value -- e.g. if the maximum number to be allowed in a control is something like 50 instead of 99 -- but apart from that, what is the reason that the HTML 5 specification does not include support for the maxlength attribute?
Per the answer found here: https://stackoverflow.com/a/18510925/1507210
You could alternately use this syntax with a text field to get what you're looking for without the chance of introducing letters via the pattern field, which uses regex matching:
<input type="text" pattern="\d*" maxlength="4">
Though as I stated in my comment, I can see no reason you would ever want to restrict the length of a number that max would fail to solve the problem, and more gracefully.
An example would be, in a situation where your number control goes into the negative. Using a length attribute would break negative numbers because a number with a maxlength of 1 would not permit '-1' as it is two characters. By only allowing min and max, it prevents programmers who aren't thinking from writing code that will break as soon as someone tries to go into the negative numbers.
Because usually numeric values are converted to a specific type, integer for example. Signed integer is a 4 byte number and we know, what is max value and min value for this type, not max_length.
I think that's the reason.

Localization of input type number

I work on a web application running in Chrome, where I have inputs with type number. In my locale commas are used for decimal numbers and a space is used for thousand separation (not that important), but when I enter these characters into a number field, they are simply removed, effectively increasing money amounts by a hundred.
I have set the language both in the browser settings and on the page, but I still need to use a period for decimals. Is there any way I can configure the field to accept commas?
Alternatively, I'll have to solve this using javascript. I guess I could handle the keydown event and change commas to periods as the user types, but that wouldn't give a great user experience, would it? So how can I acheive this with a minimal footprint in my code?
The HTML5 input type=number is inadequate from the localization point of view, due to both the definition and the implementations. It is meant to be localized but as per the locale of the browser, which you cannot set or even know as a designer/author.
On my Chrome, the input type=number step=0.001 accepts 1,2 (with comma) and sends it as 1.2 and it accepts 1.200 (with a period), visibly converting it to 1200 and sending as such. This is how things are meant to be, more or less, when the browser locale is Finnish. But it fails to accept 1 200 (which is standard way of writing 1200 in Finnish) and instead sends just the digit 1.
So it’s rather hopeless. Use whatever JavaScript widgets you can find, or a simple text input box. Anything is probably better than input type=number unless all users use browsers with the same locale and have the same expectations on the format of numbers.
If you don't need the up/down ticks, than follow workaround can help:
for comma (,) only (like german syntax):
<input type="text" pattern="[0-9]+([,][0-9]{1,2})?" name="amount">
dot (.) only:
<input type="text" pattern="[0-9]+([\.][0-9]{1,2})?" name="amount">
both but don't together: (no 1000 seperator)
<input type="text" pattern="[0-9]+([\.|,][0-9]{1,2})?" name="amount">
otherwise number for German/Deutsch:
<input name="myinput" value="0" step="0.01" lang="de-DE" type="number">
and style it with:
input[type=number] {
-moz-appearance:textfield;
-webkit-appearance: none;
appearance: textfield;
}
Also lang "global" attribute can change behavior (thx #florian) of all input elements without own lang attribute:
<html lang="en">
See:
https://html.spec.whatwg.org/multipage/dom.html#language
https://html.spec.whatwg.org/multipage/dom.html#attr-lang
List of valid lang values:
https://github.com/libyal/libfwnt/wiki/Language-Code-identifiers
The spec is clear: only a period is allowed as the decimal separator. Its up to the browsers to provide localization support for forms. Thousand separators are not allowed.
Unfortunately these characters are not allowed in the <input type="number">
See the specs here :
http://w3c.github.io/html-reference/datatypes.html#common.data.float-def
Is this the format you want ? http://jsfiddle.net/S8rqY/
While Chrome uses the Browser setting, Firefox doesn't. At least not always - e.g. when there is a lang attribute in the <html> tag, Firefox uses this.
However, you can pass the lang attribute also to the <input> tag directly.
Combining this with the Navigator API can simulate Chromes Behaviour.
Minimum example in React:
<input
type="number"
lang={navigator.language}
/>

HTML5 Input type=number removes leading zero

In Chrome 15, when using the element as a text field, leading zeros (e.g. 011) are removed even if the number entered does not break the validation rules (e.g. min, max). Is there an attribute to force the zero to remain in the field after it loses focus? The application for this is numeric data such as international phone prefixes.
<input type="text" pattern="[0-9]*" ...
that should do it for you. Will bring up the numeric keypad on iPhone and the nicer Android phones I've tested on.
<input type="tel"> has been introduced for this exact purpose. It's one of the new input types in HTML5.
I needed it for mobiles browsers and I used a mix of both solutions like this :
<input type="tel" pattern="[0-9]*">
On iOS, the numeric keyboard appear with only numbers available (no # or * symbols) whereas on Android phones, the "tel" is correctly interpreted but not the pattern (not yet on the few phones I have).
I guess that when android browsers will start to implement "pattern" attribute, this should work fine on android too (as the whatwg spec suggests).
Until then you will have to check for non numeric characters in your input and remove them. javascript replace(/[^0-9*]/g,'') is useful for this.
hope this helps
8 Years later...
Beware:
The answers with the usage of type="tel" don't fully solve the issue especially in the case of numeric fields where you might want to write floating/decimal numbers and other allowed characters (like +-.,).
Solution:
Consider using text input with pattern and inputmode like this:
<input type="text" inputmode="numeric" pattern="[-+]?[0-9]*[.,]?[0-9]+">
Details:
The pattern there will help to keep leading 0s, and behave like a numeric field (with all the other allowed characters).
And the inputmode="numeric" will pull the numeric keyboard instead of the default one.
The answer WHATWG provided me in IRC was that for non-numeric (e.g. not float/int) data that is numeric in nature, text is generally the correct type of input to use. The expection is if you are using something where a specific input type (e.g. telephone numbers, dates) already exists.
input type=number should only be used for inputs that are literally numbers (int), and not data that uses numerals (such as postal codes).