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
Related
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!
I am using the following code to prevent value to be retained in the email field when I am pressing the back button on Edge browser.
<form>
<input autocomplete="off" type="email" name="email" value="" id="Email123" placeholder="email" />
</form>
<form autocomplete="off">
<input type="email" name="email" value="" id="Email123" placeholder="email" />
</form>
When I make use of autocomplete="off" in the form tag, it is of no use and the code does not work. Same is the case with input tag. The code is not working in either case.
How do I clear the email field when I click the back button on Edge browser?
You could empty it in JS when the page loads.
document.getElementById('Email123').value = '';
this will only remove the autofilled text and not the default styles that go along with it on the input.
Try to set autocomplete to a random invalid string value, like autocomplete="nope"
Source: https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
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>
For instance in this example;
<form>
<input type="email" name="email" id="useremail" placeholder="Email Address" required> <br>
<input type="tel" name="phone" id="userphone" placeholder="Phone Number" maxlength="10" required> <br>
<input type="submit" id="sidebarformsubmit" value="Submit">
</form>
Is it possible to somehow/somewhere be able to identify that the user has inputed something in EITHER the email or phone number field. So that on submit it doesn't show "this is required".
Reword: Can at least one of the form inputs be mandatory, both is allowed as is one or the other but not none. In the above example, the user needs to have at least one form of communication whether that be phone number or email. They can have both however, but not none.
If so, how would you go about this?
You can easily capture the change events from the inputs and set the required attribute accordingly.
Like this:
var email = document.getElementById('useremail'),
phone = document.getElementById('userphone');
function onchange(){
email[phone.value?'removeAttribute':'setAttribute']('required','required');
phone[email.value?'removeAttribute':'setAttribute']('required','required');
}
email.addEventListener('change',onchange);
phone.addEventListener('change',onchange);
jsfiddle
Is it possible to somehow/somewhere be able to identify that the user has inputed something in EITHER the email or phone number field. So that on submit it doesn't show "this is required".
1) No. If you use HTML5 required on a field then that field is required. There is no way to specify interdependence.
2) Yes. You can use client-side javascript validation, generally hooked to a form submit event to do as-complex-as-you-like validation. Prevent the submit by returning false from the event handler if you don't pass validation.
3) Yes. You can do validation that can be as complex as necessary on the server when you have received the submitted form, and return directly to the form if something is wrong.
3b) You Must do validation on the server, even if you have great client-side javascript validation, otherwise I will buy things from your site for one penny. You must not trust the client.
Here's what I'd like to do:
I have a form with two inputs one is type "email" and the other is type "password".
There's an object called form in the $scope
Both inputs have ng-model directive (ng-model="form.input_name")
I wanna make an icon appear next to the input only if something's typed in the input
That icon has an action attached to clear the input (using angularjs hammer's directive 'ng-tap').
To check if the input is set and make the icon appear I use ng-if="form.input_name.length>0".
The thing is, the model value of the input is only set if the input is $valid, so for my email input the icon only appears if what's typed on the input has a valid email format (a#a.com).
Is there a way to check the view value of the input on the ng-if or is there a better solution for making the icon appear?
Here's the code i'm using(with css classes omitted):
-HTML:
<form name="form-login">
<input placeholder="email" type="email" ng-model="form.email" required>
<i hm-tap="clearContent('email')",ng-if="form.email.length>0">
<input placeholder="password" type="email" ng-model="form.passwd" required>
<i hm-tap="clearContent('passwd')",ng-if="form.passwd.length>0">
</form>
-function to clear input in coffeescript
$scope.clearContent = (fieldName) ->
switch fieldName
when 'passwd' then $scope.form.passwd = ""
when 'email' then $scope.form.email = ""
This works fine for the password input (since it has no validation).
Thanks for reading.
Browser validation will keep the internal value of the input empty until it passes the validation. In this case, an email validation. This means that what the user see and what JS see is different!
You can check the form input's $viewValue and show if it has a length > 0. You will have to name your form (which you already had) and each input (which I added). Also you can access each value by FORMNAME.INPUTNAME.$viewValue.
<form name="formLogin">
<input placeholder="email" type="email" name="email" ng-model="form.email" required /> <i hm-tap="form.email = ''" ng-if="formLogin.email.$viewValue.length>0">!</i>
<input placeholder="password" type="password" name="passwd" ng-model="form.passwd" required /> <i hm-tap="form.passwd = ''" ng-if="formLogin.passwd.$viewValue.length>0">!</i>
</form>
Example: http://jsfiddle.net/TheSharpieOne/6M5JX/1/
Also, you can avoid the clearContent function by setting the field [to an empty string] directly in the hm-tap