Setting correct autofill username and password - javascript

In my angular application I have a registration form which has the following fields in the same order
1) email id
2) otp
when the otp is entered the below fields becomes visible
3) full name
4) password
The last element is the submit button.
When we click on submit button the browser prompts the user to save the username and password.
I want the Autofill to save email as the username but its taking the fullname as the username. I tried adding a hidden field with Email filled but it worked on Firefox and dint work on Chrome
Is there any other way to achieve this by not editing the order of the form elements?
Adding html for the inputs
<input type="email" [(ngModel)]="email" name="userName" required />
<input type="text" [(ngModel)]="fullName" name="fullName" id="fullName" #fullName="ngModel" dirname="fullName" />
<input [(ngModel)]="password" id="pwd" type="password" name="password" #password="ngModel" required />
Please guide
Thanks!

Related

Chrome email field autocomplete options not showing for my website

As I visit many new websites for the first time, I see that:
For some websites, putting my cursor in the email field of signup form immediately shows me email options from what I had entered in other websites.
For other websites, putting my cursor in the email field does not give me any email options. And, I have to manually type every letter of the email.
I couldn't find what piece of code differentiates the two cases. For my website, I am stuck with #2. I am trying to achieve #1, where user can just re-use emails entered in other websites.
I used some code like this:
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required autocomplete="email">
It seems that you want to enable autocomplete, but you have specified the wrong attribute.
SYNTAX:
Autocomplete="on | off"
In order to save the email address entered for the first time though, you need to have a form tag with the attribute method="POST" on it. It is also recommended to use the autocompletetype attribute to help the browsers populate the forms more accurately.
NOTE: In some cases on older browsers you may also need to add an action if the form doesn't have one. action="javascript:void(0)" works.
An example with autocomplete on and method="POST":
<form method="POST" action="javascript:void(0)">
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required autocomplete="on" autocompletetype=”email”>
<input type="submit">
</form>
An example without autocomplete and method="POST":
<form>
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required autocomplete="off">
<input type="submit">
</form>
See also How to trigger Autofill in Google Chrome?
Difference is in autocomplete attribute of input element.
Syntax : <input autocomplete="">
It allows the browser to automatically filled the input field based on the previously filled data.
Hence, In #1 value of autocomplete attribute should be on.
DEMO
E-mail: <input type="email" name="email" autocomplete="on">
In #2 value of autocomplete attribute should be off.
DEMO
E-mail: <input type="email" name="email" autocomplete="off">
The answers so far are wrong/outdated or incomplete.
Using autocomplete="email" is perfectly valid. But the browsers do not handle it very well at the moment. In Firefox and Chrome, only the name attribute is used for autocompletion. So you should stick with name="email".
If the Chrome user really wants to have a proper autocompletion for every type that autocomplete supports, he/she has to fill out the Autofill settings. After these settings are filled, the autocompletion does not depend on the name attribute anymore, but uses the type of autocomplete. I.E. it will suggest the user's email address for fields with autocomplete="email".
So in order to have the best browser support, you should keep <input name="email" autocomplete="email" [...]>. As soon as there has been at least one submitted form with name="email" or prefilled Autofill settings, the browser should actually autocomplete your input field.
Further Resources:
caniuse: autocomplete attribute: on & off values
caniuse: input[autocomplete] (values besides on/off)
For some websites, putting my cursor in the email field of signup form immediately shows me email options from what I had entered in other websites.
I cannot reproduce that on the latest Chrome on Mac OS X. You actually have to doubleclick the input for the autocompletion to show up.
The correct values for the autocomplete attribute is "on" or "off" as you can see at : https://www.w3schools.com/Tags/att_input_autocomplete.asp
Use autocomplete="on" in form tag. like below.
<form action="" method="post" autocomplete="on">
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required>
<input type="submit" value="Submit">
</form>

Passing Disabled Form Input Value On Post Angular2

I have a form which has an email field. I am adding the value of the form field with interpolation. But I do not want the user to be able to change the email address in the form field. So I add the disabled flag to the input field. When I add disabled the form does not pass the email to the http post.
How can I disable this input field but still show the email address init to the user so that it will still post when the form is submitted with the rest of the form data?
<input type="text" class="form-control" id="email"
[(ngModel)]="personal.email" name="email" #email="ngModel" required
value="{{auth.userProfile.email}}" placeholder="{{auth.userProfile.email}}" disabled>
Maybe I am confused about two way data binding but can I not just add the value to it with something like this,
[(ngModel)]="personal.email"
=
{{auth.userProfile.email}}
Then still keep the form input field disabled?
<input type="text" class="form-control" id="email"
[(ngModel)]="personal.email" name="email" #email="ngModel" required
value="{{auth.userProfile.email}}" placeholder="{{auth.userProfile.email}}" readonly>
do not use disable.
if you wanna pass value then use readonly (readonly="readonly").
it will let you post the value

How do I disable browser's "save your password" option from my website's users?

I have a login for like this:
As you see, my username and password are saved in those inputs. I want to know, is that possible to disable saving password property of the browser by JS or HTML or whatever?
Note: Using autocomplete attribute isn't useful to do that:
<form autocomplete="off" ...>
<input name="username" placeholder="Email" type="email" autocomplete="off" />
</form>
As you see, both the form and the input have autocomplete="off" attribute, but still saving password happens.

On registration form , form fields are not getting saved in browser auto fill on submit .(ReactJs)

I have one registration form in my site in which I am saving fields and after saving the form when user again come back to that registration form I want previous field values to be saved in browser auto-fill.
below is my code snippet -
<form class="clearfix">
<input autocomplete="given-name" name="firstName" type="text" placeholder="Enter First Name" class="form-control" value="">
<input autocomplete="family-name" name="lastName" type="text" placeholder="Enter Last Name" class="form-control" value="">
<input autocomplete="email" name="email" type="text" placeholder="Enter Email" class="form-control" value="">
<input autocomplete="tel" name="phoneNumber" type="text" placeholder="Enter Number" class="form-control contactMask" value="">
<input autocomplete="address-line1" name="addressLine1" type="text" placeholder="Street 1" class="form-control">
<input autocomplete="address-line2" name="addressLine2" type="text" placeholder="Street 2" class="form-control" value="">
<a href="javascript:void(0);" className="btn baseBtn primeBtn" onClick={this.signupUser}>Sign Up</a>
</form>
In this code onClick of anchor tag I am doing ajax call via signup user function.
and after that i want that users data to be auto filled in browsers autofill address in chrome.
I have tried below ways : -
1.Few people suggested to use form "submit" button functionality to save data in autofill rather than having ajax call form anchor tag onClick event.
but that is also not working in my case.
2.I have gone through few post in which they told to use proper name and autocomplete attribute for field. but by using that browser can only guess proper field values .
I am answering my own question.
Actually,I just ignored that I am not directly submitting my form.
On backend we are using grails and using it just for REST API's.
on frontEnd we have react.js but request and response are getting served from Nginx .
So form is not getting submitted to grails that's why on form submit data was not getting saved in browser autofill.

Validate form on submit only using parsley.js

I have a simple form
<form action="#" method="GET" class="parsleyVal">
<div class="input-group input-group-lg">
<input type="email" name="email" class="form-control input-email"
placeholder="Enter your email"
data-parsley-required-message="Please enter your email address"
data-parsley-required title="Please enter your email address"
auto-complete="off" data-parsley-trigger="submit" />
<span class="input-group-btn">
<button class="btn btn-orange" type="submit" data-parsley-trigger="click touch">
Sign up
</button>
</span>
</div>
</form>
Validation starts when the sign-up button is clicked.
However, if there is no email specified, an error is shown:
enter your email.
When users start typing their email address, parsley.js does the automatic validation and shows that email must be valid.
I'd like parsley.js to re-validate the email field when submit button is clicked again but not on the fly.
I have tried xCodexInlinexPlacexHolderx on the input field - does not help.
Looks like I finally figured out what I wanted.
Might be not ideal way to do it, if anyone could recommend something else.
$('.parsleyVal input[type=email]').on('keyup keydown', function () {
$('.filled').removeClass('filled');
$('.parsleyVal').parsley().destroy();
})
Script removes class to hide error message and destroy parsley validation, which will be triggered again on sign-up button click.
You can control what triggers the validation with two different settings:
data-parsley-trigger
Setting for what triggers the validation the first time. The default is null which basly means on submit
data-parsley-trigger-after-failure
Setting for what triggers a revalidation after the first failure. The default is input which means that the field will be revalidated after each change on the field.
The setting you need is: data-parsley-trigger-after-failure
Example:
<input type="email" id="profile-email"
data-parsley-required="true"
data-parsley-trigger-after-failure="submit"/>

Categories

Resources