The following input field is not working properly.
<input id="textinput" oninvalid="setCustomValidity('Die Eingabe ist zu kurz')" pattern=".{5}" maxlength="255" required="" name="input[1164]" type="text" class="form-control input-md " value="">
What is working?
Typing in the right amount of characters and submitting.
What is not working?
e.g. typing in the wrong amount, hitting submit. After the expected error message is shown, I´m not able to reach the right amount of characters or to fill the input correct (in case it is not depending on the amount of characters).
What browsers have I used to verfiy this bug?
Chrome and Firefox, each in the last stable version.
Want to see it live?
http://jsfiddle.net/0efurqa9/
Answer already exists :)
HTML5: Why does my "oninvalid" attribute let the pattern fail?
If you set your field with setcustomvalidity, your field is invalid... And STAYS invalid. You need to force the behavior back to its original one, with oninput="setCustomValidity('')", like this:
<form>
<input id="textinput"
oninvalid="setCustomValidity('Die Eingabe ist zu kurz')"
oninput="setCustomValidity('')" required="required" pattern=".{5}"
maxlength="255" name="input[1164]" type="text" class="form-control input-md "
value="">
<input type="submit">
</form>
Also:
I recommend the use of required="required" instead of required=""
take care: this attribute is not supported in Internet Explorer 9, nor in Safari.
Related
I can find a lot of references even on StackOverflow that Chrome Auto-fill functionality should work if autocomplete="on".
However that does not seem to be the case with the latest Chrome I have here (60.0.3112.90). To be precise - default browser autocomplete works fine , but Auto-fill will ignore the field completely.
The code below won't work with Chrome Auto-fill:
<form method="post" name="checkout" url="/">
<input type="text" name="given-name" autocomplete="on" />
<input type="text" name="email" autocomplete="on" />
</form>
However, this will work without issues:
<form method="post" name="checkout" url="/">
<input type="text" name="given-name" autocomplete="given-name" />
<input type="text" name="email" autocomplete="email" />
</form>
You can easily test it here: https://jsfiddle.net/kw4yjpz4/
Screenshots:
Does it mean that all input fields now have to have autocomplete="[NAME]" for auto-fill to work? Is this a bug in the newest Chrome or intended behaviour?
I stumbled across this same issue and searching led me here... I moved on not finding an answer and finally stumbled across the answer to my cause of the issue, so I came back in case someone like me wanders through with the same issue (likely myself in 2 years when I've forgotten about it - hi, me!).
Turns out if the site does not have a valid SSL cert, Chrome Autofill does not work.
Try the following:
<!DOCTYPE html>
<html>
<body>
<h2>The autocomplete Attribute</h2>
<form action="/action_page.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
<p>Fill in and submit the form, then reload the page to see how autocomplete works.</p>
<p>Notice that autocomplete is "on" for the form, but "off" for the e-mail field.</p>
</body>
</html>
The above works as I want in Chrome when the site has a valid SSL cert. Saving locally and opening the .html results in Autofill not working.
Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.
The autocomplete attribute works with the following types: text, search, url, tel, email, password, datepickers, range, and color.
And It contains only on|off Value for 'autocomplete' attribute.
In some browsers you may need to activate an autocomplete function for this to work (Look under "Preferences" in the browser's menu)
autocomplete works once you submit the data see
https://jsfiddle.net/0x31Loo1/#&togetherjs=CtJMLzM7AP
<form method="post" name="checkout" url="/" autocomplete="on">
<input type="text" name="given-name" />
<input type="text" name="email" />
<input type="submit">
</form>
I have a form where I've implemented an autosuggest dropdown (via jQueryUI) so that a user can search for a contact in our app and have their information auto-filled. I want autocomplete to be disabled on the form, but Safari (on macOS) is ignoring autocomplete="off". I have specified autocomplete to be off on the input fields, as well as in the <form> tag. This form is for a physical mailing address for a friend, and Safari is showing matching contacts from Contacts.app... but it is overlaying a dropdown on top of my autosuggest dropdown. How do I force Safari to stop showing this dropdown?
<form accept-charset="UTF-8" action="/listings/sailing/create_customized_card" autocomplete="off" class="new_greeting_card" id="new_greeting_card" method="post">
...
<li>
<input autocomplete="off" autocorrect="off" class="validate required" id="to_name" name="delivery[to_name]" placeholder="First & last name" size="30" type="text" />
</li>
<li>
<input autocomplete="off" autocorrect="off" class="validate required" id="to_address_street_1" name="to_address[street_1]" placeholder="Street 1" size="30" type="text" />
</li>
<li>
<input autocomplete="off" autocorrect="off" id="to_address_street_2" name="to_address[street_2]" size="30" type="text" />
</li>
<li>
<input autocomplete="off" class="validate required city" id="to_address_city" name="to_address[city]" placeholder="City" size="30" type="text" />
<select class="validate required state" id="to_address_state" name="to_address[state]">
<option value="AK">AK</option>
...
</select>
<input autocomplete="off" class="validate required zip" id="to_address_zip_code" name="to_address[zip_code]" pattern="(\d{5}([\-]\d{4})?)" placeholder="Zip" size="30" type="text" />
</li>
...
</form>
FYI - I know that most browsers ignore autocomplete="off" for username and password fields, but these are address fields for a contact.
It seems you can't disable autocomplete in a similar way.
Safari looks for certain keywords in the id of the element and if there is something like "name", "address", "e-mail" etc., it enables the autocomplete function (tested on Safari 10.1.1).
So, the only simple workaround that I've found is to use a different id that doesn't trigger the autocomplete function.
EDIT: I found out that Safari also uses the placeholder attribute to determine whether to enable autocomplete function or not.
Just to add one wrinkle to the other fine answers...
I found empirically that Safari get its hints from a) the name of the field, b) the associated label, or c) adjacent text. It figures out things like field names "name", "firstname", "lastname", and labels or adjacent text like "name", "First name", "Last name".
In my application, it was competing with a custom autofill. I defeated my dropdown as follows:
I changed my field name from xx_firstname to mxyzptlk, and the label from First Name to First Name. The character is a zero width non-joiner. You can't see it on the screen, but it appears to defeat Safari - at least for now!
I had the same problem, overlapping dropdowns. What you could do is change the 'name' string (in the input's placeholder) by changing one or some of the characters into a homoglyph.
What I did was change the 'a' character with 'ɑ' character. Looks a bit weird, but it's worth getting rid of the annoying overlap.
Just make sure you document it in the html-code.
Also, I noticed that the field's description in a P tag above the input was used by Safari to trigger the autocomplete function.
Another hack I found based on #worddragon answer was to use and letter-spacing.
disableAutoFillHack(localizedContent) {
return localizedContent.split('').join(' ');
}
...and then add // adjust the letter spacing based on the font sizes
.autofill__disable {
letter-spacing: -0.125em;
}
I am trying to prevent the browser giving me recommendations when I type into an input box. For example, if I type 'a' it will give me a list of items beginning with'a' that I have typed into an input box in my browser in the past.
I have tried autocomplete="false" but this doesnt work as far as I can tell. Autocomplete must be different to what I am looking for.
Perhaps it is a browser setting that cannot be controlled by the developer. Does anyone know if there is a way to do this?
It is working for me on this codepen link. It doesn't display prediction for email field, but it does show prediction for first name and last name field.
If it doesn't work for you then it must be your system software causing this. I'm using Chrome on Linux.
<form action="/action_page.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
http://codepen.io/piyushpatel2005/pen/aJQaNN
In most HTML forms when I start typing something (say birth date) navigators propose to sit with previous similar entries. For instance on html form submit the second visit offers me the first visit entries.
However, when using a bootstrap modal containing a form, the same does not happen, for instance: with a form inside.
I do not want to use jquery autocomplete since I do not have a list of potential answers, I just want to have the same behavior in and outside modals.
Thanks.
Browser autofills are notoriously unpredictable - they make educated guesses about the data based on the name attribute of inputs. It's unlikely you'll be able to get this behavior consistently cross-browser.
can you try this :
add the attribute autocomplete = "on" on your form,
maybe it will do the job.
<form action="demo_form.asp" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
source: http://www.w3schools.com/tags/att_input_autocomplete.asp
Read through this article it should help get things working for you.
Example:
<input type="text" id="name" name="name" autocomplete="name">
<input type="tel" id="tel" name="tel" autocomplete="home tel">
I am trying to make a login form. But the text and password field of that form is not working properly. I have tested the code in all major browsers but different browser's giving different output. Firefox shows my password field is already filled, chrome shows both of the input fields are filled but IE shows it perfectly. I have already used "autocomplete" attribute. But it didn't change anything. Can anyone help me to get rid of this annoying problem? My html code-
<form method="POST">
User Name : <input class="form" type="text" name="text" id="username" maxlength="100" size="20">
Password : <input class="form" name="password" type="password" id="password" maxlength="16" size="20"><br><br>
<input type="submit" name="submit">
</form>
screen shots:- [firefox,chrome,IE]
In terms of chrome:
You've saved the username and password. It's prepopullated by chrome. That's why its showing that way.
Regarding firefox
I guess you've saved password here again. Because i've tested it in firefox and it's rendering properly. Else you've set the value attribute.
From settings, remove saved password for your page and try.
The HTML you have written is invalid and has unclosed elemens, your input fields should end with \> making your code look as follows:
<form method="POST">
User Name : <input class="form" type="text" name="text" id="username" maxlength="100" size="20"/>
Password : <input class="form" name="password" type="password" id="password" maxlength="16" size="20"/><br><br>
<input type="submit" name="submit"/>
</form>
Since you were not closing the input fields, your browser would automatically close them on your behalf, I would imagine that it has closed them after the <br> tags and therefore rendering them as the value of the input field.