I am trying to use the new HTML5 number input for users to input a price. I want the step to be "0.01". This should be fairly simple, and my code looks like this:
<input type="number" step="0.01" />
Well if you click on the arrows a bit, you'll get numbers like 1.1400000000000001 or numbers like 1.1 which both don't make sense for dollars.
Does anyone know of a way to make the number field actually step by 0.01, and to have a consistent number of significant figures? Or if anyone has a more elegant solution for allowing users to input prices, I would love to hear it.
Thanks
Well, first of all expecting Html 5 stuff to work as expected so early in the game and designing applications around that is probably not such a good idea.
As for a solution, yes just to JavaScript to increment and provide the user to up/down arrows or whatever and the click event could simple increment/decrement the value by the step value you desire.
this is the expected javascript behavior, you can take a look at this answer
Related
Amazingly, I cannot find any solutions that aren't hacks into the keyup event, and even those don't worry. I am stunned that I cannot in native HTML5 just restrict an input from having more than two decimals.
For example, after I filled in a number input with (10.22) if I typed another number, nothing would happen. I have not found anything on StackOverflow, is this seriously a "yet-to-be-solved" thing, since I can't find a good solution online?
I am wondering if there is a certain way to validate a HTML form upon an error being returned. For instance, I have a form where the user can input their string which is then used to query data to do with that string.
Ideally, I would like a way for the form to be validated if the user inputs the string wrong i.e. with capitals or spelling mistakes. But I think that could only be realized once the system has tried to get the data responding to that string.
I hope Stack Overflow is an appropriate place to ask this.. after looking around in the hopes to find an answer to my question I can't seem to find a valid way to approach this.
Is there a way in HTML to validate the form in the event that an error is returned?
Apologies if this is obvious, I am quite new to the concept of validating forms.
Thanks in advance.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation
What you're looking for is actually new technology AFAIK. Once upon a time, you needed to use a scripting language, i.e. JavaScript to do something like this. But it turns out you can actually add regular expressions, ranges of values, ranges of lengths, and more straight into your HTML for each input, and the browser will do all the work for you.
An example from the MDN source above
<form>
<label for="choose">Would you prefer a banana or a cherry?</label>
<input id="choose" name="i_like" required pattern="banana|cherry" />
<button>Submit</button>
</form>
Where your input is required, and it must match exactly either banana or cherry. The browser will handle the process of informing the user their input hasn't worked and prevent you from submitting to the server.
Here's a live example I made out of the above code block: https://codepen.io/anon/pen/zjdrbV
Sometimes, though, you might need to validate an input that requires more than what the HTML validation can provide.
In that case, you'll just have to write a little JavaScript. Here's a good example of that: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation under section Limiting the size of a file before its upload. There's tons of resources on that sort of thing, and most likely you'll be able to find plenty of help for virtually any input you need to validate.
I have been asked to help fix a bug in a web application that is mostly python (running Flask) which is what I know and why I offered to help. However my HTML knowledge is very bad and I need help. I've fixed the bug in the python code, but I want to make sure the user can't find more ways to break the application. It has to do with the form in HTML where users input the time for a deal. The input is in text format with the placeholder 'hh:mm:ss' but that doesn't stop them from entering all kinds of things other than a time in that format. If I had done this from the beginning I would have made this field a 'time' format but too many things depend on it being a text field now that I would rather just set some validation on this text input field.
The piece of code is:
<input type="text" name="time_left" id="time_left" placeholder="hh:mm:ss">
The only restriction is that the time can't be less than 00:00:00 and it can't be more than 01:30:00. I would love to just put a min/max attribute in here somewhere but I doubt it's that simple. Especially with it being text.
Can anyone advise me what I can do (the simpler the better, as I say, I'm not very good with HTML)
For HTML5 only solutions, there are two ways. One is to make it a type="time" input. It's value can still be read with input.value as a string, if that's of any concern to you.
<input type="time" min="00:00:00" max="01:30:00">
Browsers will allow steps of 1 minute. If you need second precision, add a step="1".
The other solution is to add the pattern attribute:
<input type="text" pattern="0(1:30:00|1:[012][0-9]:[0-5][0-9]|0:[0-5][0-9]:[0-5][0-9])">
Both solutions are viable and each has its advantages and disadvantages.
The latter will have better browser support, but for support closer to 100% you will either way need a JS library that takes over from the browser. I wrote Hyperform, that would do that (and more), but if it's just this one field you might be better off writing your own event handler and attaching it to the change event of that input field.
Edit: The regexp in the pattern attribute will distinguish several cases separated by |. The first and simplest is the max time 01:30:00. The next are the times from 01:00 to 01:29:59, and finally the times from 00:00 to 00:59:59.
I'm trying to make an HTML input, where I can input up to 100 minutes and 59 seconds.
The input should be like the time input.
Is there somebody with an idea what i can do?
Either you do some javascripting or start to use a framework. Not jquery can support you in doing that, but here are some jquery examples to start with:
http://www.sitepoint.com/10-jquery-time-picker-plugins/
Maybe you could code the interface and interactivity yourself, since that feature doesn't yet seem to be implemented in browsers (from what Jukka K. Korpela has explained). I can try to help with the code if you are interested. Please post a comment showing your interest if you'd like me to help.
The HTML way of doing this is to use <input type=time> with a max attribute. Assuming the desired minimum is zero, here’s the code:
<input id=foo name=foo type=time min="0:00" max="100:59">
Browser support is still limited to WebKit browsers. The markup degrades gracefully to a simple text input field in other browsers, but you may wish to add JavaScript code to check the syntax of input in that case.
So I have an existing HTML page that has a field for Last 4 digits of Credit Card:
<input value="" name="Last4ofCC" maxlength="4" id="Last4ofCC1">
Works great, but a feature request just came in to make it a numeric field and not allow non-numeric characters.
At first I thought of plugging in some Javascript, but then I thought, why not just use an HTML5 element. I changed to the following:
<input type="number" value="" name="Last4ofCC" max="4" id="Last4ofCC1">
But not only does it still allow non-numeric characters, the max attribute doesn't work either! I'm testing this on FireFox 8, so not sure what the problem is.
Does anyone know what I've done wrong here?
you need to include the proper doctype at the top of your page in addition to changing your input types.
<!DOCTYPE html>
However, it's not going to do what you think it's going to. Setting an input as a type="number" will pretty much only get you the spinners on the side and tell the form what it should be. If you want to ensure only digits are entered, you will need to do a regex, like /^\d+$/ on keyup.
More info on HTML5
Yes, you can add HTML5 features to existing pages. Browser support to them is, at least at present, independent of any doctype stuff you may or may not have at the start of your page.
It is, however, probably not a good idea to use type="number" for reading four digits. It is meant for reading numeric data, and it will happily accept 42 without requiring any more digits, for example. Moreover, the user interface may even confuse the user. But if you use type="number", you should in this case set min="0" and max="9999".
A better HTML5 construct is pattern="[0-9]{4}" required. It is supposed to run a check on the input, checking that it consists of exactly four digits. This is supposed to happen even when JavaScript is disabled.
Since browser support is still rather limited, it’s a good idea to use JavaScript checks, too, as a convenience to the user.
'max' indicates the maximum value allowed, not the maximum number of characters.
Jason's answer is mostly correct. However, you should not do validation on keyup unless the user needs additional help. I'm the author of h5Validate. In the process of improving conversion rates in a large production shopping cart, we discovered that users get confused if they see a validation error message while they're still trying to type the number.
h5Validate first runs validation on change, and if the value is invalid, it will add keyup to help the user correct the field with each keystroke. This seems like a minor nitpick, but the difference it makes measures in the millions of dollars per year in revenue for large scale shopping cart systems.
Nothing, as far as I know Firefox doesn't support those yet, http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29. Try Chrome to see the effect.
You can check out the latest form support for Firefox here (it's supposed to be support):
https://developer.mozilla.org/en/HTML/Forms_in_HTML
Also check out:
http://caniuse.com/#search=form%20validation
This jQuery plugin will add support for all browsers though. It's a safe approach that still uses HTML5 syntax:
http://ericleads.com/h5validate/
Good luck!