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.
good afternoon,
i'm, at the moment, programming a web site with Symfony2.
I use a form and into this form there are some input type="text"
and two input type="password".
I'm encountering a problem using this form, indeed the password and the neighboor input complete itselves, by using my own name and my password.
The thing is that those inputs shouldn't be allowed to do this, a thing even stranger is that the input in which my name is put is not even a login input, it is called "inpCity".
I'm not sure if what i'm saying is clear for you, but this is really embarassing. I don't want it to autocomplete, i put the autocomplete attribute to off, but it just hides the value of the field.
Any idea about this ?
This is the first time it happens, while i used to create 3 others website (without Symfony)
PS : sorry for my english, this is not my main language
I think it's built-in feature of browser but suggestions are based on the name of input field.
How did you override getName() of your form type? That "name" is prefixed to you field names, for example:
getName() returns "my_form"
input name is email
your field will be named my_form_email
So, inspect you HTML and find how input name was generated...
I was wondering whether it is possible to assign a value to an HTML text box and protect it.
What I mean is make it´s content unmodifiable, so that when the form gets submitted im "sure" it was this value which was submitted.
BTW I realize the easier way would be not to "listen" fot this input and just assign it but it would come in handy to be able to do what´s stated above.
I hope the question is clear enough, please ask for any needed clarification.
Thanks in advance!
EDIT: I was definitely not clear enough but I tried to express that i should hold the value after submitted (not modifiable in client side)
No, it's not. You should never trust user input, which includes form submissions.
The other answers tell you how to mark the field as read-only. This is useful if you want to display a particular value, while showing that it's not intended to edited.
However, it can still be modified with Firebug, DOM Inspector, etc. Or, they can just submit a HTTP request without using the browser at all.
I would recommend storing the value in a session instead.
Set the readonly property of the input element:
<input type="text" readonly="readonly" />
This will prevent any modification (except if the user edits with a DOM Inspector). Always validate input on the server. If you do not want any changes made, don't allow the user to edit it.
http://www.w3schools.com/tags/att_input_readonly.asp
Form inputs have a 'disabled' and 'readonly' attributes you can set to make them un-editable.
http://htmlhelp.com/reference/html40/forms/input.html
Though you can never be 100% sure what is getting sent from the client side. The entire DOM is editable by the client.
Just do this
<input type="text" value="VALUE" readonly />
Then itll be read only :)
<input type="text" readonly="readonly"/>. But: Never be sure, and validate data on the server side. It is very easy to request GET/POST with invalid data.
I've noticed a lot of websites with form(s) containing input fields whose "name" attribute is specified even if it isn't used for styling or scripting purpose!
Moreover, according to the official document about the form in HTML document ...
name = cdata [CI] This attribute names
the element so that it may be referred
to from style sheets or scripts. Note.
This attribute has been included for
backwards compatibility. Applications
should use the id attribute to
identify elements.
So, my question is: should this attribute used only for styling and scripting purposes?
Thanks in advance!
EDIT: In particular, could be avoided the use of this attribute with input fields of "text" type (when there aren't no styling or scripting purposes)?
EDIT 2: So, you have almost confirmed what I had thought about: the "name" attribute will be deprecated in further HTML specifications/standards!!!??? It is still "alive" only for backwards compatibility ... in some cases can be avoided but there are still some cases (such as the radio button) where it is necessary!
I think you'll find almost every site will have inputs with the name attribute. I don't see it going away anytime soon.
The name attribute specifies a name
for an input element.
The name attribute is used to identify
form data after it has been submitted
to the server, or to reference form
data using JavaScript on the client
side.
Note: Only form elements with a name
attribute will have their values
passed when submitting a form.
source
The name attribute is the notation to reference specific elements within the scope of a webpage through non-DOM Javascript:
document.forms['your_form'].elements['aa']
The id attribute for the element needs to be set with the same value for the following to work:
document.getElementById('aa')
My understanding is that when Netscape created Javascript, it used the name attribute. The HTML spec however decided to go with id, but kept name for backwards compatibility. IME, using the name attribute was required for Internet Explorer 6 support because the javascript engine in IE wouldn't read the id attribute - only the name though both were defined.
...could be avoided the use of this attribute with input fields of "text" type (when there aren't no styling or scripting purposes)?
If you don't have any javascript attached to the text fields, yes - they would be unnecessary.
There are differences between id and name attributes. An id is applicable to any element in the HTML document while a name is relevant for input fields only. An id is required by standard to be unique in a page (though not necessarily followed in all web pages). Different elements may have same name though. One particular case comes into mind is the radio button. All radio buttons should have the same name and the value of the one selected would be given back to the form. So you can see that name still has significance in HTML form processing.
I have seen in automatic HTML form generation systems (like zope.formlib), that id and name attributes both are automatically generated for different types of input widgets. Such automatic form generation systems take proper care of all the nuances associated with differences in id and name attributes. They also do things like generating a hidden input element for each checkbox element. So wherever possible, I try to use some sort of automatic HTML form generation mechanism and let it take care of the issues involved.
This is an old question, but it's worth noting that many modern JS frameworks rely on the name attribute. In particular, jQuery's serialize function:
For a form element's value to be included in the serialized string, the element must have a name attribute.
If anything, name seems to be making a comeback.
It's also worth noting that the name attribute is useful because it has slightly more "scope" than id. id must be unique within a page, but the same name can be used multiple times. This makes it useful when you have multiple forms on the same page, or when you want to reference a group of checkboxes, etc.
IIRC older browsers use name in place of ID, that's why it's normally included.
Your reference to HTML 4 is way out of date. Here's WHATWG's discussion of name - https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#naming-form-controls:-the-name-attribute
name should not be used for scripting or styling. That is what id is for as you have said.
But name is not obsolete and I see no prospect that it might be removed from HTML. Its purpose is specifically to submit data to a server.
id should be unique for your HTML document to be well formed. name might not be. You might have a set of three radio buttons, let's say "Small", "Medium" and "Large". You could give them three unique values for their id attributes, so if your user interacts with other elements you could change the selected radio button in script. But when the form is submitted, you want only one value to be submitted, so you give all three radio buttons the name value for name.
<input type="radio" id="size-small" name="size">Small</input>
<input type="radio" id="size-medium" name="size">Medium</input>
<input type="radio" id="size-large" name="size">Large</input>
When using the xhtml1-transitional.dtd doctype, collecting a credit card number with the following HTML
<input type="text" id="cardNumber" name="cardNumber" autocomplete='off'/>
will flag a warning on the W3C validator:
there is no attribute "autocomplete".
Is there a standards-compliant way to disable browser auto-complete on sensitive fields in a form?
Here is a good article from the MDC which explains the problems (and solutions) to form autocompletion.
Microsoft has published something similar here, as well.
To be honest, if this is something important to your users, 'breaking' standards in this way seems appropriate. For example, Amazon uses the 'autocomplete' attribute quite a bit, and it seems to work well.
If you want to remove the warning entirely, you can use JavaScript to apply the attribute to browsers that support it (IE and Firefox are the important browsers) using someForm.setAttribute( "autocomplete", "off" ); someFormElm.setAttribute( "autocomplete", "off" );
Finally, if your site is using HTTPS, IE automatically turns off autocompletion (as do some other browsers, as far as I know).
Update
As this answer still gets quite a few upvotes, I just wanted to point out that in HTML5, you can use the 'autocomplete' attribute on your form element. See the documentation on W3C for it.
I would be very surprised if W3C would have proposed a way that would work with (X)HTML4. The autocomplete feature is entirely browser-based, and was introduced during the last years (well after the HTML4 standard was written).
Wouldn't be surprised if HTML5 would have one, though.
Edit: As I thought, HTML5 does have that feature. To define your page as HTML5, use the following doctype (i.e: put this as the very first text in your source code). Note that not all browsers support this standard, as it's still in draft-form.
<!DOCTYPE html>
HTML 4: No
HTML 5: Yes
The autocomplete attribute is an enumerated attribute. The attribute
has two states. The on keyword maps to the on state, and the off
keyword maps to the off state. The attribute may also be omitted. The
missing value default is the on state. The off state indicates that by
default, form controls in the form will have their autofill field name
set to off; the on state indicates that by default, form controls in
the form will have their autofill field name set to "on".
Reference: W3
No, but browser auto-complete is often triggered by the field having the same name attribute as fields that were previously filled out. If you could rig up a clever way to have a randomized field name, autocomplete wouldn't be able to pull any previously entered values for the field.
If you were to give an input field a name like "email_<?= randomNumber() ?>", and then have the script that receives this data loop through the POST or GET variables looking for something matching the pattern "email_[some number]", you could pull this off, and this would have (practically) guaranteed success, regardless of browser.
No, a good article is here in Mozila Wiki.
I would continue to use the invalid attribute. I think this is where pragmatism should win over validating.
How about setting it with JavaScript?
var e = document.getElementById('cardNumber');
e.autocomplete = 'off'; // Maybe should be false
It's not perfect, but your HTML will be valid.
I suggest catching all 4 types of input:
$('form,input,select,textarea').attr("autocomplete", "off");
Reference:
http://www.w3.org/Submission/web-forms2/#the-autocomplete
http://dev.w3.org/html5/markup/input.html
If you use jQuery, you can do something like that :
$(document).ready(function(){$("input.autocompleteOff").attr("autocomplete","off");});
and use the autocompleteOff class where you want :
<input type="text" name="fieldName" id="fieldId" class="firstCSSClass otherCSSClass autocompleteOff" />
If you want ALL your input to be autocomplete=off, you can simply use that :
$(document).ready(function(){$("input").attr("autocomplete","off");});
Another way - which will also help with security is to call the input box something different every time you display it: just like a captha. That way, the session can read the one-time only input and Auto-Complete has nothing to go on.
Just a point regarding rmeador's question of whether you should be interfering with the browser experience: We develop Contact Management & CRM systems, and when you are typing other people's data into a form you don't want it constantly suggesting your own details.
This works for our needs, but then we have the luxury of telling users to get a decent browser:)
autocomplete='off'
autocomplete="off" this should fix the issue for all modern browsers.
<form name="form1" id="form1" method="post" autocomplete="off"
action="http://www.example.com/form.cgi">
[...]
</form>
In current versions of Gecko browsers, the autocomplete attribute works perfectly. For earlier versions, going back to Netscape 6.2, it worked with the exception for forms with "Address" and "Name"
Update
In some cases, the browser will keep suggesting autocompletion values even if the autocomplete attribute is set to off. This unexpected behavior can be quite puzzling for developers. The trick to really forcing the no-autocompletion is to assign a random string to the attribute, for example:
autocomplete="nope"
Since this random value is not a valid one, the browser will give up.
Documetation
Using a random 'name' attribute works for me.
I reset the name attribute when sending the form so you can still access it by name when the form is sent. (using the id attribute to store the name)
Note that there's some confusion about location of the autocomplete attribute. It can be applied either to the whole FORM tag or to individual INPUT tags, and this wasn't really standardized before HTML5 (that explicitly allows both locations). Older docs most notably this Mozilla article only mentions FORM tag. At the same time some security scanners will only look for autocomplete in INPUT tag and complain if it's missing (even if it is in the parent FORM). A more detailed analysis of this mess is posted here: Confusion over AUTOCOMPLETE=OFF attributes in HTML forms.
Not ideal, but you could change the id and name of the textbox each time you render it - you'd have to track it server side too so you could get the data out.
Not sure if this will work or not, was just a thought.
I think there's a simpler way.
Create a hidden input with a random name (via javascript) and set the username to that. Repeat with the password. This way your backend script knows exactly what the appropriate field name is, while keeping autocomplete in the dark.
I'm probably wrong, but it's just an idea.
if (document.getElementsByTagName) {
var inputElements = document.getElementsByTagName("input");
for (i=0; inputElements[i]; i++) {
if (inputElements[i].className && (inputElements[i].className.indexOf("disableAutoComplete") != -1)) {
inputElements[i].setAttribute("autocomplete","off");
}
}
}
I MADE THIS WORK IN 2020!
I basically create a css class that applies -webkit-text-security to my inputs.
Here's the link to a more recent discussion:
https://stackoverflow.com/a/64471795/8754782
This solution works with me:
$('form,input,select,textarea').attr("autocomplete", "nope");
if you want use autofill in this region: add autocomplete="false" in element
ex:
<input id="search" name="search" type="text" placeholder="Name or Code" autcomplete="false">
Valid autocomplete off
<script type="text/javascript">
/* <![CDATA[ */
document.write('<input type="text" id="cardNumber" name="cardNumber" autocom'+'plete="off"/>');
/* ]]> */
</script>