i want that "name is too short" to be visible when last_name.errors.minlength is true. but i get an error:
Property 'minlength' comes from an index signature, so it must be accessed with ['minlength'].
<div>
<label for="lastname">Last Name</label>
<input required #last_name="ngModel" minlength="4" maxlength="10" type="text" name="lastName" ngModel>
<div [ngClass]="{visible: last_name.touched && last_name.invalid}" class="message">
<div *ngIf="last_name.errors.minlength">name is too short</div>
<div></div>
<div></div>
<div></div>
</div>
</div>
I usually do validations in a "reactive" way, to a form with the own Validators that ReactiveFormModule gives you, so I'm not used to validate just a simple field as "#local reference"...
But, try to change your *ngIf code like this:
*ngIf="last_name?.errors?.['minlength']"
In your project's configuration, you have the noPropertyAccessFromIndexSignature rule enabled. It ensures, that if a certain field wasn't explicitly defined in an interface, then you cannot access it via dot syntax.
So, here what you need to do is to use indexed syntax instead:
*ngIf="last_name.errors['minlength']"
Or as another option, that looks cleaner, you can also use the hasError method. The code will look like that:
*ngIf="last_name.hasError('minlength')"
Correct syntax:
“last_name.errors['minlength']"
How do I prevent a form from suggesting auto-complete values, from previous entries or from saved information in Edge?
In the above image, the email input field is marked as autocomplete="false", but still in the right pane you can see the suggestion is populating.
When I add autocomplete=disabled to one field it seems it work, but when I add the attribute to all the inputs, it again starts displaying suggestions for every field.
What is the solution for this?
Add the aria-autocomplete="list" attribute to the input.
<input type="text" id="FirstName" name="attr1" aria-autocomplete="list">
Do not use any other value for the attribute.
According to your description, I reproduced the problem. I think your issue is caused by the "Save and fill personal info" setting being enabled in Edge.
If you navigate to edge://settings/personalinfo and disable this feature, you can see this behavior no longer exists.
Or you can also click the "Manage personal info" option in the picture you provided, and then disable it.
I did some simple tests and found that if you need to solve the problem from the code, you need to modify the name attribute of the form's related field.
Like this（do not use attribute values like name or email... and maybe there are others I am not aware of):
<label for="attr1">attr1:</label>
<input type="text" id="FirstName" name="attr1">
<label for="attr2">attr2 :</label>
<input type="text" id="LastName" name="attr2">
<label for="attr3">attr3 :</label>
<input type="email" id="Email" name="attr3" autocomplete="off">
<input type="submit">
I don't recommend this, because good naming helps you understand and maintain the code. Using proper attributes like name and email also helps your code be more accessible for screen readers or other assistive technology.
By suggestions, I mean the drop down menu appear when you start typing, and it's suggestions are based on what you've typed before:
For example, when I type 'a' in title field, it will give me a ton of suggestions which is pretty annoying.
How can this be turned off?
What you want is to disable HTML autocomplete Attribute.
Setting autocomplete="off" here has two effects:
It stops the browser from saving field data for later autocompletion
on similar forms though heuristics that vary by browser. It stops the
browser from caching form data in session history. When form data is
cached in session history, the information filled in by the user will
be visible after the user has submitted the form and clicked on the
Back button to go back to the original form page.
Read more on MDN Network
Here's an example how to do it.
<form action="#" 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>
If it's on React framework then use as follows:
<input
id={field.name}
className="form-control"
type="text"
placeholder={field.name}
autoComplete="off"
{...fields}/>
Link to react docs
Update
Here's an update to fix some browsers skipping "autocomplete=off" flag.
<form action="#" autocomplete="off">
First name: <input type="text" name="fname" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br> Last name: <input type="text" name="lname" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br> E-mail:
<input type="email" name="email" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br>
<input type="submit">
</form>
On Chrome, the only method we could identify which prevented all form fills was to use autocomplete="new-password". Apply this on any input which shouldn't have autocomplete, and it'll be enforced (even if the field has nothing to do with passwords, e.g. SomeStateId filling with state form values). See this link on the Chromium bugs discussion for more detail.
Note that this only consistently works on Chromium-based browsers and Safari - Firefox doesn't have special handlers for this new-password (see this discussion for some detail).
Update: Firefox is coming aboard! Nightly v68.0a1 and Beta v67.0b5 (3/27/2019) feature support for the new-password autocomplete attribute, stable releases should be coming on 5/14/2019 per the roadmap.
Update in 2022: For input fields with a type of password, some browsers are now offering to generate secure passwords if you've specified autocomplete="new-password". There's currently no workaround if you want to suppress that behavior, but I'll update if one becomes available.
use autocomplete="off" attribute
Quote:IMPORTANT
Put the attribute on the <input> element,
NOT on the <form> element
Adding the two following attributes turn off all the field suggestions (tested on Chrome v85, Firefox v80 and Edge v44):
<input type="search" autocomplete="off">
I know it's been a while but if someone is looking for the answer this might help. I have used autocomplete="new-password" for the password field. and it solved my problem. Here is the MDN documentation.
This solution worked for me: Add readonly attribute.
Here's an update to fix some browsers skipping the
"autocomplete=off" flag.
<input type="text" name="lname" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');">
autocomplete = "new-password" does not work for me.
I built a React Form.
Google Chrome will autocomplete the form input based on the name attribute.
<input
className="scp-remark"
type="text"
name="remark"
id='remark'
value={this.state.remark}
placeholder="Remark"
onChange={this.handleChange}
/>
It will base on the "name" attribute to decide whether to autofill your form. In this example, name: "remark". So Chrome will autofill based on all my previous "remark" inputs.
<input
className="scp-remark"
type="text"
name={uuid()} //disable Chrome autofill
id='remark'
value={this.state.remark}
placeholder="Remark"
onChange={this.handleChange}
/>
So, to hack this, I give name a random value using uuid() library.
import uuid from 'react-uuid';
Now, the autocomplete dropdown list will not happen.
I use the id attribute to identify the form input instead of name in the handleChange event handler
handleChange = (event) => {
const {id, value} = event.target;
this.setState({
[id]: value,
})
}
And it works for me.
I had similar issue but I eventually end up doing
<input id="inp1" autocomplete="off" maxlength="1" />
i.e.,
autocomplete = 'off' and suggestions will be disappeared.
<input type="text" autocomplete="off"> is in fact the right answer, though for me it wasn't immediately clear.
According to MDN:
If a browser keeps on making suggestions even after setting
autocomplete to off, then you have to change the name attribute of the
input element.
The attribute does prevent the future saving of data but it does not necessarily clear existing saved data. Thus, if suggestions are still being made even after setting the attribute to "off", either:
rename the input
clear existing data entries
Additionally, if you are working in a React context the attribute naturally becomes autoComplete.
Cheers!
I ended up changing the input field to
<textarea style="resize:none;"></textarea>
You'll never get autocomplete for textareas.
If you are using ReactJS. Then make this as autoComplete="off"
<input type="text" autoComplete="off" />
I have a quick question which I am a bit confused about...
I know in HTML you can have fields required in a form but I want to make the full name field below required which is fine
<input type="text" name="fullname" id="fullname" placeholder="Full
Name" required="required"/><br/>
But the tiny issue I am having which I dont know how to fix is I want to make the other field optional so the user can submit the form even without filing it out.
<input type="text" name="Other" id="fullname"
placeholder="Other"/><br/>
Any ideas ?
Thanks ! :)
Fields are optional by default. Don't put the "required" flag if you don't want it to be required...!
Just remove the required attribute from the one you want to be optional and it won't require that to be filled out for submission.
I have never seen this, have no idea what is going on:
<form action="/cgi-bin/Lib.exe" method=POST name="slider" ID="Form2">
<input type="text" name="user" value="" ID="Text1">
<input type="text" name="end" value="" ID="Text2">
</form>
function setval()
{
alert(s.getValue());
alert(s2.getValue());
document.slider.user.value = s.getValue();//set value of hidden text box to value of slider
document.slider.end.value = s2.getValue();//set value of hidden text box to value of slider
document.slider.submit();
}
When submitting form from setval(), when I change the name of the first input box from "user" to anything else, my cgi application won't except it and I get an error? I can change the name of the secons input box to anyting and it doesn't seem to have any problem? Confused. Thanks!
Seems more like it's a problem with the cgi than it is with the HTML/Javascript, to me. It probably makes the assumption that a value for "user" will always be sent. Not much else I can tell you without seeing the form-processing code.
Your CGI must be expecting an element called 'user'. You would need to check the source.