I want to use an input url field in a rich text editor component (RTE) which is placed inside a form element but it's triggering the form validation which shows "please fill in this field" in other input fields. Is there a way to exclude the input url field from form validation?
<input type="url" v-model="state.url" no-validation>
or something similar?
I found this question but no answer.
I don't know if this will work with vue.js, but to exclude an html input element from built-in form validation, you can disable it:
<input type="url" maxlength="42" disabled>
Here I've used maxlength because it is a standard attribute that is used by built-in form validation.
Maybe Vue's v-model doesn't work the same way, but I think this is worth a try.
Supporting documentation
The above use of the disabled attribute works for me (with built-in form validation, and I've only tested it on Chrome).
But I have not found conclusive supporting documentation on MDN.
See:
disabled attribute: interactions
Client-sode form validation
I don't find these docs entirely clear.
They imply that using the disabled attribute is a legal way to get the required attribute to be ignored:
Because a disabled field cannot have its value changed, required does not have any effect on inputs with the disabled attribute also specified. Additionally, since the elements become immutable, most other attributes, such as pattern, have no effect, until the control is enabled.
but also say that these 2 attributes are not permitted together:
Note: The required attribute is not permitted on inputs with the disabled attribute specified.
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
Is it possible to set the default input focus on an HTML form without using JavaScript, for example:
<html>
<form>
Input 1: <input type="text" name="textbox1"/>
<br/>
Input 2: <input type="text" name="textbox2"/>
</form>
</html>
I want to set the default focus to either of the text-boxes when the form loads without using JavaScript (as I want the behaviour to occur when a user has js disabled).
You can do it in HTML5, but otherwise, you must use JavaScript.
HTML5 allows you to add autofocus to your form element, eg:
<input type="text" name="myInput" autofocus />
This does work in browsers which support HTML5 (Or rather, browsers which support this particular part of HTML5) but as you know, not everybody can use it yet.
Something to be aware of ... if you set a focused form element, then anyone using Assisted Technology (AT) like a screen reader will need to back up to see menus and any other content that is before the focused field.
A preferred method, in my opinion , is to not set focus to any field, except a skip-link if its available. That gives them the option to skip into the pages content or read the page from the top down.
As others have said, without Javascript you can't guarantee a default field. An alternative option you might want to try, if you have multiple fields that a user might want to access is using the accesskey attribute. This will essentially mean a user can return to either of the fields instantly later during browsing, which may come in handy for users of screen readers, etc...
Wikipedias article on this subject is quite useful - http://en.wikipedia.org/wiki/Access_key
This is not possible without some form of scripting. Even Google's home page requires Javascript to focus the search field.
You might be able to use the tabindex attribute and use the lowest value on the default textbox though. Check here for browser support:
http://reference.sitepoint.com/html/object/tabindex#compatibilitysection
The site suggests that
(in almost all other cases—namely form controls and links—the tabindex has excellent support)
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.
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>