I am having a problem with a password input on my website when viewing it using firefox, here is the html :
<div class="passField">
<label for="password">Password : </label>
<input type="password"
name="password" id="password"
title="6 to 20 characters, one uppercase and numbers allowed." placeholder="APassword123"
maxlength="20" pattern="^[A-Za-z0-9]{6,20}$"
/>
<span class="inputDesc">'.$passwordDesc.'</span>
</div>
The user is directed to the page containing this input by a link in an email like this :
http://www.mysite.com/reset.php?theId=1&theKey=699acfc121edfd91df48d5d99044d74d
A database check is preformed and if the details match the ones relating to that user id in my database then the user is presented with two inputs. One for the initial password, one for the confirmation of the password that was typed.
The problem I am having is that when the page loads, the initial password input contains a few dots (data) whereas the second input contains the placeholder... both are type password.
Here is a screen shot to see what i am talking about :
Here is the same page in IE :
As I understand it, they should both come out uniform, showing the placeholder as usual regardless of the input type and as I have not assigned any value to this input, why on earth is a value being presented in this manner when no value is assigned even according to the page source?
Any assistance, understanding or information relating to this would be greatly appreciated, thank you!
Use autocomplete="off" on the fields to avoid pre-filling of the fields. Of course this does not account for possible JavaScript or anything else populating the field.
Edit - Further explanation (because it was asked for)
Most browsers have a built in function to automatically fill form fields. They fill in fields that have standard names a user has filled in often(this is often asked first) For example address fields are often filled like this.
2nd part of the feature is filling saved passwords, but browsers are not really smart. When you save a password on, for example, http://example.com/phpmyadmin they will also fill in a password field on the homepage of http://example.com/ Which is often incorrect because the login on the homepage is pretty sure not the login for the admin area.
You can solve this issue by either setting autocomplete=off which turns this feature off for the input field(could be that this also works on entire forms if you want) or giving the fields different names. Whereas using autocomplete=off is far more reliable.
Related
Is there any way to stop this behavour?
<div class="form-group">
<label for="user-profile-name-input">Name</label>
<input type="text" id="user-profile-name-input" class="form-control" aria-describedby="name" placeholder="Name" value="...">
</div>
So every time a change anything is this input field and navigate to a new page within my website, the browser prompts me if I would like to update my username for the saved password of the site.
Is there any way to stop this behaviour?
I trying adding autocomplete=off but there was no change.
-----
UPDATE
Ok so I managed to figure it out. It was an error on my part. Keeping this post here incase anyone else encounters this issue.
I have a couple of bootstrap modals on the same page. One of them has a type=password input. Since these are not completely removed when hidden the browser still has a reference to the password input.
I removed the modal and the browser is no longer prompting for me to update my username to the saved password every time i change a value in an input field.
Make sure you dont have a hidden input "type=password" somewhere on your page.
What you're asking for cannot be done at a code level. The behavior you're experiencing is browser specific and is something that can only be turned off by the user themselves if they choose to.
An example of how you can turn it off in Chrome here.
The browser recognizes the input field as a password field and therefore prompts for a password save, since the browser does not have a password stored for that specific page. Clicking "Never" will only stop the prompt for that page specifically, and any future page will still continue to prompt you until you completely disable the feature.
There are some hacky, tacky solutions to your problem if you really wanna go about it - check this post for instance, or this one. However, I strongly recommend that you don't use them as they are detrimental to the user experience. Let the user decide whether they want the feature or not.
That's a default functionality provided by chrome to save your credentials while you enter your credentials in your account in browser and not to repeat the credentials when you are trying to re login. There's no way to stop it by using HTML code.
I want to verify text in HTML5 form validation. For example, when I fill in a field which should take email address only but when user inputs letters instead, the error message shows up, how can I verify that error message? I have been struggling with this for a very long time and your help is much appreciated.
Since HTML5 there are new input type available i.e. email, tel ... By typing something like this in your form:
<input type="email" required />
you get an email field that is validaded through HTML5. It also has the advantage that, when your page is used on a mobile device the keyboard changes i.e. when you have a tel field the keyboard layout changes to a numbers-only keyboard.
Alternatively you can use a pattern to check whether an email address is valid.
<input pattern="\A(?:[a-z0-9!#$%&'*+/=?^_{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")# (?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])\z"/> (no guarantee that this is correct
More information on different input types available since HTML5:
http://www.wufoo.com/html5/
http://www.w3.org/TR/html-markup/input.email.html
http://www.regular-expressions.info/email.html
If you want to make absolutely sure that your email is valid I don't think there's a way around using javascript i.e. to check if a country code is actually valid.
For example:
<input value="userspassword" type="password"/>
I'm tempted to do this in certain situations on log in, sign up, edit account, etc pages. Should it never be done as it could be a security vulnerability?
edit: I'm not talking about as a placeholder, but as re-displaying a password the user entered on a form that didn't pass validation.
If you're just trying to use the password as part of a Sticky Form, that's fine if you are using SSL and POST.
I am having trouble trying to find a solution for this, without resorting to a php statement, or javascript. This is as the idea seems so simple, that i am pretty sure there must be a way to do this without the use of the two.
I have a registration form, and certain fields on this form are required. But i have come to kind of a quandry, because i require the user to enter atleast one phone number, so that they may be contacted incase there is a problem with their order.
So i have 3 fields, "Phone" "Mobile" "Fax"
What i want to do, is make it so the user must enter either a phone, or mobile number in order to complete the form.
But, i guess my question is this... Is it possible to use the required attribute in some way, in order to achieve this effect?
Here is the html for these fields:
<li>
<label for="phone">Phone:</label>
<input type="tel" name="phone" id="phone" value="'.htmlout($phone).'" required aria-required="true" placeholder="0317021101"title="Please enter your home or work number here. You must enter either a phone, or mobile number." maxlength="20"/>
</li>
<li>
<label for="mobile">Mobile:</label>
<input type="tel" name="mobile" id="mobile" value="'.htmlout($mobile).'" placeholder="0827564829" title="Please enter your mobile number here. You must enter either a mobile, or phone number." maxlength="20"/>
</li>
In assistance, input or advice regarding this would be greatly appreciated, thank you!
Wouldn’t it be simpler to have two phone number fields, the first of them required? The explanations seem to say that either of the numbers can be a mobile number or something else, so why not make them symmetric in structure?
The first could be labeled “Primary phone (required)” and the other “Secondary phone (optional)”. These are rather long for labels, but in my experience, too short labels (like “Phone” and “Alternate phone”) tend to make some users re-type the first number...
Unfortunately, required only works on individual fields and not groups of fields (even if they have the same name), so there is no way to do this with HTML5 validation alone.
Demo: http://jsfiddle.net/ka7kC/
You shouldn't rely on client-side validation anyways, you have to validate on the server side as well. Besides, not all browsers even support HTML5 validation.
If you're using jQuery, I suggest the tried-and-true validation plugin for the client side:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
If it's actually required, only a server-side validation script can actually enforce it.
Javascript is really the only other option to do complex (ie. anything more than pattern matching) validation client-side.
The "required" attribute doesn't work in most versions of IE and some versions of Safari so you'd want to validate your input another way.
Can anyone explain how the (IE) vcard_name attribute works as applied to HTML input fields (see below)?
<input name="foo" vcard_name="bar">
I've read Microsoft's documentation but am still unclear. In the example above, does the inclusion of the vcard_name attribute mean that AutoComplete suggestions will be drawn exclusively from the Profile Assistant? Or will suggestions be drawn from both the Profile Assistant and the standard autocompletion store?
Also, does the inclusion of the vcard_name attribute mean that the user's input will be saved in the Profile Assistant when the form is submitted?
Hope this will help you.
Thanks
How It Works (Basically)
When you enter information into a form and submit it, Internet Explorer sets up what's known as a vCard. The reason the function is so successful is that Web authors tend to use the same NAME attributes for many form elements across pages.
For instance, I'll bet you've filled out a ton of forms that ask for your name. Allow me to demonstrate. Type the first few letters of your name in the text box just below. If you're using IE 5.0 or above, I'll bet your name appears as a choice you can make. Try it in the e-mail box, too. I'll bet you get your e-mail as a choice. It won't work for everyone, but I'll bet I get the majority of you:
If it worked for you, and I'll bet it did, you're probably wondering how I knew each item would come up. Well, first off, here's the code from the form above:
<FORM>
Name: <INPUT TYPE="text" NAME="name">
E-mail: <INPUT TYPE="text" NAME="email">
</FORM>
It's the NAME attribute that does the trick. I'm basically making a guess that sometime, somewhere, you filled out a form that asked for your name and e-mail address. In addition, I am guessing that the form used the NAME attributes "name" and "email". They are very common.
If it worked, then you have a couple of vCards on your system named "VCARD_NAME" and "VCARD_EMAIL". When you filled out the other form and submitted it, the card was created. Now, from that point on, whenever you run into a form that has an element with a NAME attribute set to "name" or "email," the text from that vCard will be suggested to you.
Let me attempt to prove that point again. Below is a form that looks exactly like the one above, except the first text box has its NAME attribute set to "griswald" and the second set to "ookook". Go ahead, try to put your name and email in. You'll get no help from AutoComplete.
You didn't get any help because you don't have VCARD_GRISWALD or VCARD_OOKOOK on your computer. Luckily, I didn't give you the opportunity to submit the form, or you would have.
Basically, the *vcard_name* attribute overrides the name attribute. It tells the browser to use the vcard_name value passed as the schema to look for AutoComplete suggestions. If this is not provided, the name attribute is used.
Specifies the vCard type to use for the Autocomplete box. Setting the
value of the vCard_name attribute causes the contents of the
Autocomplete window to depend on the value of this attribute only,
regardless of the value of the name attribute. If the value of the
vCard_name attribute is not specified, the contents of the
Autocomplete window depend on the value of the name attribute.
Source : http://help.dottoro.com/lhwgvcmt.php