I've created a web FROM but Chrome autocomplete is populating the info in the wrong places. Chrome (Version 41.0.2272.89 (64-bit))
Despite both the input field AND the form field having the autocomplete="off" attribute, Chrome insists on showing a drop down history of previous entries for the field.
Sample From
<form accept-charset="UTF-8" action="/something" autocomplete="off" id="something_form" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
<input name="authenticity_token" type="hidden" value="xxxxxxxxxxxx" />
</div>
<div class="form-group no-padding col-xs-12 col-sm-12 col-md-12 col-lg-12">
<label class="control-label col-xs-4 col-md-4 col-sm-4 col-lg-4 no-padding text-right" for="from-course-name">
Name:
</label>
<div class="controls col-xs-8 col-md-8 col-sm-8 col-lg-8 no-padding">
<div class="input-append">
<input id="from-name" inlineeditable-column="0" type="text" name="o_name" class="form-control custom-form_control required sensitive long " autocomplete="off" >
</div>
</div>
</div>
</form>
On the input fields that you want to stop from auto complete this will work. Make the fields read only and on focus remove that attribute like this
<input readonly onfocus="this.removeAttribute('readonly');" onblur="this.setAttribute('readonly');" id="from-name" type="text" name="o_name" class="form-control custom-form_control required ">
In Chrome autocomplete="off" only works for fields other then password, email, username, mobile, zipcode, city, ...
If the field's name or id is like id="blabla-password" or name"email-blabla" or id="bla-username-bla" etc... then you have to use the following
id="bla-bla-some-password" autocomplete="new-password"
id="bla-email-bla" autocomplete="new-email"
id="some-username-id" autocomplete="new-username"
name="bla-password" autocomplete="new-password"
name="bla-email-bla" autocomplete="new-email"
name="some-username-id" autocomplete="new-username"
...city autocomplete="nope"
...zipcode autocomplete="nope"
...mobile autocomplete="nope"
...
For all the other fields keep using autocomplete="off" !
It is still the best result
id="description" autocomplete="off"
id="date" autocomplete="off"
id="some-text" autocomplete="off"
...
And so on
Chrome has been ignoring autocomplete="off" for a while now, you have to trick chrome by doing the following: 1. Set the input type to text, and 2. reset the input type when on focus event is triggered
<input type="text" id="password" autocomplete="off" name="password">
$('#password').on('focus', function(){
$('#password').attr('type', 'password');
});
Reset done using Jquery
Related
I'm typing to disable/avoid the autosuggest on specific field.
The html snippet is this:
<div class="form-group">
<h4 class="whitish" for="name-of-car-id">Name of car (max length 30 chars)</h4>
<input type="input" class="form-control" placeholder="" id="name-of-car-id" autocomplete="off">
<span id='remainingC'></span>
<small class="form-text text-muted">You will identify your group of IDs by this name</small>
<div id='name-of-car-error' style='color:red; font-size: 18px;'></div>
</div>
note that I added the autocomplete='off' and yet, the browser still provide a suggestion.
Try to replace input type="input" with type="text"
At first I thought it was some jerk move to make me type my username for added "security" on top of 2FA so I decided to fix it with tampermonkey and remove the autocomplete="off" attribute only to discover that there wasn't one.
Why does Chrome not offer to autofill the email input in this form? This is a link to the site.. But this is the form that is blocking autocomplete on the email address.
<form method="post" class="form-horizontal">
<h1 class="paste-page-header">Log in</h1>
<div class="form-group">
<div class="col-md-24">
<label class="paste-input-label">Email</label>
<div class="paste-input-wrapper">
<input type="text" id="email" name="email" placeholder="Email" tabindex="1" required="true" class="paste-input sl_whiteout" autofocus="autofocus" maxlength="255">
</div>
</div>
</div>
<div class="form-group col-md-24">
<button role="login-button" type="submit" tabindex="2" class="paste-primary-button" data-loading-text="<i class='icon icon-spinner icon-spin'></i>" value="Log in">Next
</button>
</div>
<span class="paste-text">Don’t have an account yet? Sign up for free.</span>
<input inert="" readonly="true" type="password" id="password" name="password" tabindex="50" style="opacity: 0.02;" aria-label="This is a hidden password field for compatibility with password managers. Please ignore this field.">
<input type="hidden" name="g" value="/console/sms/dashboard?" class="sl_whiteout">
<input type="hidden" name="t" value="182b71c36e3bb0a0a788ab671fbe875c7b46602de5f49fb3e441645b8848a76a" class="sl_whiteout">
<input type="hidden" name="CSRF" value="2869689c41323f2456ec6558c8ee7f3e4c409eda3bbed69bf10228f752a293e4" class="sl_whiteout">
</form>
After you type your email address, it will allow you to autocomplete the password, it's just this field that is a problem. And I tried this:
> x = document.getElementById('email')
<input type="text" id="email" name="email" placeholder="Email" tabindex="1" required="true" class="paste-input sl_whiteout" autofocus="autofocus" maxlength="255">
> x = document.getElementById('email')
x.autocomplete
''
So, they aren't disabling it with JS (at least not in any way that I can see.....
I'm asking so that I don't make this mistake on any of my sites and because I'm really curious how they pulled this off.
When visiting the "reset password" route of my single-page app and looking at the Chrome browser console, I am greeted with the follwing warning:
[DOM] Password forms should have (optionally hidden) username fields for accessibility: (More info: goo.gl/9p2vKq)
Helpfully, the html of the form in question is also printed to the console in the next line, and quite clearly contains a hidden username field:
<form data-ember-action data-ember-action-436="436">
<div class="form-group">
<label for="newpasswordone">Password</label>
<input type="password" autocomplete="new-password" placeholder="Enter your new password" id="ember437" class="form-control ember-text-field ember-view" data-op-id="0">
<label for="newpasswordtwo">Password (again)</label>
<input type="password" autocomplete="new-password" placeholder="Re-enter your new password" id="ember438" class="form-control ember-text-field ember-view" data-op-id="1">
<input type="hidden" name="username" autocomplete="username" value="a_b">
</div>
<button disabled type="submit" class="btn btn-default">Reset password</button>
</form>
I tried some minor variations -- unhiding the username field, marking it readonly, moving it outside the div -- without affecting the warning.
How does Chrome expect to be served the username?
Problem occurs with Chrome 63 and 64.
I had the same problem. After some digging, I found that it needs to be an input element with the type text. By "optionally hidden" they mean that you may hide it with CSS.
If you just add an input with the name email or username chrome gives you another warning saying that input elements should have autocomplete attributes. So this is what I came up with to fix these errors:
<input
type="text"
name="email"
value="..."
autocomplete="username email"
style="display: none;"
>
You will need to manually render the actual username or email into the elements value attribute.
Also, keep in mind that inline styles are not a very good practice.
Use the hidden attribute instead of type="hidden"
<input hidden type="text" autocomplete="username" value="{{...}}">
I had this same situation.
Everything seemed be ok but I still got this verbose.
On my case helped me a relocate this userName input from end of form to begin of that.
It was my code before my changes:
<form id="changePass">
<div class='modal-dialog'>
<input type="password" class="form-control" id = "changePasswordOldPassword" autocomplete="current-password"/>
<input type="password" class="form-control" id = "changePasswordNewPassword" autocomplete="new-password"/>
<input type="password" class="form-control" id = "changePasswordNewPassword2" autocomplete="new-password"/>
<div class="modal-footer">
<button type="button" id="change-password-ok-button">Ok</button>
<button type ="button" data-dismiss="modal">Close</button>
</div>
</div>
<input id="userName" name="username" autocomplete="username" value="">
</form>
And this is current code:
<form id="changePass">
<input id="userName" name="username" autocomplete="username" value="">
<div class='modal-dialog'>
<input type="password" class="form-control" id = "changePasswordOldPassword" autocomplete="current-password"/>
<input type="password" class="form-control" id = "changePasswordNewPassword" autocomplete="new-password"/>
<input type="password" class="form-control" id = "changePasswordNewPassword2" autocomplete="new-password"/>
<div class="modal-footer">
<button type="button" id="change-password-ok-button">Ok</button>
<button type ="button" data-dismiss="modal">Close</button>
</div>
</div>
</form>
you must put the input tag inside another tag for example:
<form action="">
<div>
<input type="text" autocomplete="username">
</div>
<div>
<input type="password" autocomplete="password">
</div>
<div>
<input type="password" autocomplete="password">
</div>
I had this same situation in VueJs when i use rendering conditional v-if v-else and i try put input tag inside new tag and it's work for me
Though I know that this question is quite old but thought maybe it may be useful for someone .I also faced the same issue with my React app update user password and this worked for me just above the password fields without label.Excuse me for writing the React way .
<input hidden type='text' name='email' autoComplete='email' />
Basic usage :-
<form>
<input hidden type='text' name='email' autoComplete='email' />
<label htmlFor="oldPass">Enter your current password</label>
<input id="oldPass" type="password" />
<label htmlFor="newPass">Enter your new password</label>
<input id="newPass" type="password" />
</form>
After reading Jonas comment I rebuilt the project and the warning went away
I had the same warning showing in the console and this is how I fixed it:
<input hidden autocomplete="username" name="username" type="text" value="{{..}}"/>
<input hidden autocomplete="email" name="email" type="text" value="{{..}}"/>
I have some code as below:
<label class="control-label col-sm-4" for="datepicker">Date of Birth</label>
<div class="col-sm-8" ><input class="form-control col-sm-10" type="text" id="datepicker" name="datepicker" required="true" value="<?php if(isset($_SESSION['DOB'])) echo $_SESSION['DOB'] ?>"></div>
My issue is that I don't want this "Date of Birth" field to be a required field anymore. How do I set this field as unrequired?
I have tried setting required="false" but this does not work.
Any advice much appreciated, many thanks
Jean-Claude
The required attribute does not take the attribute value. It's just required="true", or required="required", or just setting the
<input type="text" required />
would make it required as well. Just unset the required attribute. If you're trying to unset it after some user action (with javascript) then use the
.removeAttribute("required") function.
<label class="control-label col-sm-4" for="datepicker">Date of Birth</label>
<div class="col-sm-8" ><input class="form-control col-sm-10" type="text" id="datepicker" name="datepicker" value="<?php if(isset($_SESSION['DOB'])) echo $_SESSION['DOB'] ?>"></div>
Avoid using required if you don't need them.
Also the attributes that are not necessary must be avoided.
<form class="form-asd" role="form">
<h2 class="form-signin-heading">login</h2><hr />
<label class="control-label" for="username">Username</label>
<input class="form-control" type="email" required="" placeholder="username"data-error="enter username"></input>
<label class="control-label" for="username">password</label>
<input class="form-control" type="password" required=" " placeholder="Password"></input>
<label class="checkbox"></label>
<button class="btn btn-lg btn-primary " type="submit">submit</button>
</form>
how can we change this default message of popover of the require field "Please fill out this field "to "please enter username"
You can use setCustomValidity function when oninvalid event occurs.
Like below:-
<input class="form-control" type="email" required=""
placeholder="username" oninvalid="this.setCustomValidity('Please Enter valid email')">
</input>
Update:-
To clear the message once you start entering use oninput="setCustomValidity('') attribute to clear the message.
<input class="form-control" type="email" required="" placeholder="username"
oninvalid="this.setCustomValidity('Please Enter valid email')"
oninput="setCustomValidity('')"></input>
Combination of Mritunjay and Bartu's answers are full answer to this question. I copying the full example.
<input class="form-control" type="email" required="" placeholder="username"
oninvalid="this.setCustomValidity('Please Enter valid email')"
oninput="setCustomValidity('')"></input>
Here,
this.setCustomValidity('Please Enter valid email')" - Display the custom message on invalidated of the field
oninput="setCustomValidity('')" - Remove the invalidate message on validated filed.
And for all input and select:
$("input[required], select[required]").attr("oninvalid", "this.setCustomValidity('Required!')");
$("input[required], select[required]").attr("oninput", "setCustomValidity('')");
I wanted to change the text of the textarea. This method helped
<form action="/action_page.php" method="post">
<input type="text" required placeholder="username" oninvalid="this.setCustomValidity('Error validate')" oninput="setCustomValidity('')">
<br><br>
<textarea placeholder="Ko’cha, uy, xonadon" name="address" required oninvalid="this.setCustomValidity('Majburiy maydon')" oninput="setCustomValidity('')"></textarea>
<input type="submit" value="Submit">
</form>
$("input[required]").attr("oninvalid", "this.setCustomValidity('Say Somthing!')");
this work if you move to previous or next field by mouse, but by enter key, this is not work !!!