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.
Related
I'm aware that parsing numbers with pure CSS is impossible. But as in my case I know for certain that the input will always be in a specific way, is it possible to change the display of an input field based on the count of characters in it?
e.G. I want '123450' to be displayed as '1,234.50' - or if it were 'abcdef' it should become 'a,bcd.ef'.
So, I would like a rule that says: from right to left: after the second char display a dot, after the fifth and eight char display a comma.
Is that possible?
Example:
<input type="text" class="unformatted" value="123456" />
Should display like
<input type="text" class="formatted" vaulue="1,234.56" />
while still retaining its original value 123456.
What you're asking is not possible with pure CSS. The smallest you can go with CSS is the single HTML tag, you cannot go deeper than that.
Individual lines of text cannot be selected or altered, as they are seen as a whole by CSS engine.
With a little help from JavaScript, however, this can be easily done.
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
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.
I'm working on a simple check for my input fields. I got 3 places where I'm validating user-input: javascript regex, html pattern and php regex. The Javascript and PHP part work fine, but my HTML pattern somehow returns an error for every input except blank. I tested it on regexpal.com (regex tester) and it works perfectly fine there, so I reckon I must be doing something wrong.
Here's my regex:
/^[a-zA-Z0-9\!\?\,\.\s]{0,50}$/
I'm trying to allow users to input the following:
Alphabetic characters, including capitals
Numeric characters
Puncation: exclamation(!), question(?), comma(,) and dot(.)
Spaces
Here's how I implement it:
<input type="text" id="name" name="name" aria-required="true" pattern="/^[a-zA-Z0-9\!\?\,\.\s]{0,50}$/" value="loaded value from db">
Please note: I'm allowing 0 characters to be entered because I will check it with PHP, and if the input field(s) is/are empty, a pre-set value will be written to the database.
Basically it should allow users to enter general words or sentences, but somehow it doesn't allow anything. The only way I don't get an "error" is when I leave the inputfield blank. What am I doing wrong? Is my regex wrong? Am I not implementing it correctly? I can provide more code if necessary.
Help is much appreciated!
Thanks in advance.
Try removing the forward slashes (/) from the input's pattern attribute.
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}
/>