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.
Related
Input type number accepts + and -.
I don't want this behavior. How can I prevent this?
<input type="number">
I can type 100+ or 200- or both 300+-
maybe some other special characters are acceptable. I don't want this. Number input should only be Number.
Is it possible User should not even type any special characters?
The default behaviour of a number input is to allow the user to type anything they like and perform validation when the form is submitted.
This is consistent with how all other validation features built into HTML forms work.
If you type 100- then try to submit the form, the submission will fail and an prompt along the lines of "Please type a number" will appear.
If you want validate-as-you-type behaviour then you will need to implement it with JavaScript. This is tricky to pull off well though. For example, you might prevent a user from pasting a string copied from a document like 123,456.12 because it has a comma in it. If you let them paste it they can then edit the comma out.
Currently, if I have <input type="url">, someone adding a URL without the protocol will cause a message to appear, saying "Please enter a URL". Is it possible to assume http://, unless otherwise specified? If that requires the use of Javascript, or something overly complicated, is there a way to keep the url type on the input, without it stopping someone from completing the form?
The implementation of <input type="url"> varies by browser. It can be implemented as a gadget that implies http:// at the start when no protocol part is present, or in some other way.
You can use the attribute value="http://" to specify an initial value, probably helping the user to get the URL syntactically right. But this is suitable for required fields only. Since http:// is not a valid URL (just a prefix), constraint validation will report an error, if the user does not change the initial value – which is fine for a required field, but not for an optional field.
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.
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