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.
Related
I have a simple html form, i am using "google autofill" on a field that autofill data on two fields.
The issue is that the browser address autofill is overlapping the google autofill.
How to disable the browser autofill on fields on every browser ?
Feel free to share thoughts on this.
Thankyou.
Here's the universal solution that will work in all browsers as of May 2021!
TL;DR
Rename your input field names and field ids to something non-related like 'data_input_field_1'. Then add the character into the middle of your labels. This is a non-printing character, so you won't see it, but it tricks the browser into not recognizing the field as one needing auto-completing, thus no built-in auto-complete widget is shown!
The Details
Almost all browsers use a combination of the field's name, id, placeholder, and label to determine if the field belongs to a group of address fields that could benefit from auto-completion. So if you have a field like <input type="text" id="address" name="street_address"> pretty much all browsers will interpret the field as being an address field. As such the browser will display its built-in auto-completion widget. The dream would be that using the attribute autocomplete="off" would work, unfortunately, most browsers nowadays don't obey the request.
So we need to use some trickery to get the browsers to not display the built-in autocomplete widget. The way we will do that is by fooling the browser into believing that the field is not an address field at all.
Start by renaming the id and the name attributes to something that won't give away that you're dealing with address-related data. So rather than using <input type="text" id="city-input" name="city">, use something like this instead <input type="text" id="input-field-3" name="data_input_field_3">. The browser doesn't know what data_input_field_3 represents. But you do.
If possible, don't use placeholder text as most browsers will also take that into account. If you have to use placeholder text, then you'll have to get creative and make sure you're not using any words relating to the address parameter itself (like City). Using something like Enter location can do the trick.
The final parameter is the label attached to the field. However, if you're like me, you probably want to keep the label intact and display recognizable fields to your users like "Address", "City", "State", "Country". Well, great news: YOU CAN! The best way to achieve that is to insert a Zero-Width Non-Joiner Character as the second character in the label. So replacing <label>City</label> with <label>City</label>. This is a non-printing character, so your users will see City, but the browser will be tricked into seeing C ity and not recognize the field!
Mission accomplished! If all went well, the browser should not display the built-in address auto-completion widget on those fields anymore!
Hope this helps you in your endeavors!
This is not so easy to implement cross-browser.
Many browsers, in particular Google Chrome has pushed very hard on having a tool that helps users auto-fill their forms, but for developers this has been just been painful.
I could list tons of different ways that could or could not work depending on different factors, but I will post this one solution that finally does the trick. So if you have been looking for this answer all over the internet, leave me a comment below and tell me if it worked.
First of all, due to browser compatibility, we need to add these attributes as eventually things will work properly:
autocorrect="off" spellcheck="false" autocomplete="off"
This is supposed to be enough, BUT IT IS NOT! and we all know that. so the next thing to do is to add a little bit of JS in case the browser managed to ignore these attributes. For this example I will just use jQuery and assume that we are dealing here with inputs, but you can chose any selector you want.
$('form').attr('autocomplete', 'off');
$('input').attr('autocomplete', 'off');
Finally, this will work 50% of the times, but if the browser has previously detected that this form was filled up in the past it might judt ignore it, so let's add a final step.
There is another popular trick that involves adding a dummy password field, but I don't like adding dummy content, and I don't find this solution elegant so I will just skip it, besides it doesn't work.
To be honest this final step is the one that makes everything work, but as I said it is better if our attributes are ready for future compatibility. Keep in mind that the browser will never attempt to autocomplete a readonly input, so for this last step we need to make it readonly and on focus bring it back to normal, so add the following JS in the onfocus attribute:
readonly onfocus="this.removeAttribute('readonly');"
BINGO! it should work now.
So the final input looks like this:
<input type="text" name="email" required autocorrect="off" spellcheck="false" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" />
<script>
$('input').attr('autocomplete', 'off');
</script>
It seems like a lot, but this works 100% of the times. as I said probably with readonly onfocus="this.removeAttribute('readonly'); is enough, but browser compatibility is changing and eventually things will work properly, so it is good to have it there.
If this worked (or did not work) leave a comment!
Thanks
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'm using a input type="number" for my metabox, which works fine when you enter a new item and publish but going back to that same post and trying to update anything, it won't allow it and displays 'Invalid Input' next the fraction. I didn't know this was not supported thought type number meant all numbers, including fractions but what's confusing is why does the browser allow it to be posted but not updated since the value is already there? What's the best way to patch this up, making it into a text input instead?
Ok after some digging around I found the answer to my question, use steps to declare incremental values, worked as expected. More info here: http://www.w3.org/TR/html-markup/datatypes.html#common.data.float.positive
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!
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