I'm trying to validate a phone number input field in a form. I'm using intl-tel-input (which is great, BTW) to get the extension and full number, then pass the value to a hidden field so I can send the form data to the server.
This is the displayed form:
<div class="col-md-6">
<div class="form-group">
<label class="control-label" translate="contacta.form.phone" for="field_phone_pasar">Teléfono móvil</label>
<!-- <input type="hidden" name="phone" id="field_phone" ng-model="vm.form.phone" ng-maxlength=12 maxlength=12 /> -->
<div>
<input type="text" class="form-control form-control-200" name="phone_pasar" id="field_phone_pasar" ng-maxlength=15 maxlength=15 ng-model-options="{ updateOn: 'blur' }"/>
<div ng-show="contactaForm.phone.$invalid && contactaForm.phone.$touched">
<p class="help-block" ng-show="contactaForm.phone.$error.required"
translate="contacta.form.validation.required">This field is required.</p>
<p class="help-block" ng-show="contactaForm.phone.$error.minlength"
translate="contacta.form.validation.phoneminlength">Your phone is required to be at least 8 characters</p>
<p class="help-block" ng-show="contactaForm.phone.$error.maxlength"
translate="contacta.form.validation.phonemaxlength">Your phone cannot be longer than 12 characters</p>
</div>
<p id="error-msg" class="hide" translate="contacta.form.validation.required" style="color: #a94442; padding-top: 5px">Invalid number</span>
</div>
</div>
</div>
This is the hidden input field, with the REQUIRED attribute, if I remove it, phone value disappears from the data sent to the server.
<input type="hidden" class="form-control form-control-200" name="phone" id="field_phone" ng-model="vm.form.phone" required/>
And I copy the data on blur on the controller:
$("#field_phone_pasar").bind('blur', function(){
$("#field_phone").val($("#field_phone_pasar").intlTelInput("getNumber"));
});
The problem: this is not working. The view does not accept the value passed as a valid value, user must touch the form manually to pass the requirement.
I have tried removing the required attribute, but phone disappears from the data sent to the server. Also, with the displayed form solely, field gets validated, but field data is sent as null/empty.
Maybe I should try an Angular approach? I'm looking into this question, but so far I'm getting no luck.
---UPDATED QUESTION AND PROGRESS---
Still struggling with this. I have tried to clone the field, get the value but still getting phone:"" in the POST. Also tried:
$('#phone_pasar').on('change', function(){
$("#phone").val($('#phone_pasar').intlTelInput("getNumber"));
});
But data sent seems to ignore the value.
---UPDATE #2---
I seem to be getting somewhere. As #tim-vermaelen pointed out, I checked if there were other active validators, and tried the $("#field_phone").val($(this).intlTelInput("getNumber")).trigger('change') and validate-non-visible-controls methods, with no positive effect.
What I have tried is the Angular approach. I have printed the JSON of the vm.form.phone, and got this:
{
"$viewValue": "",
"$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [
null
],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": true,
"$invalid": false,
"$error": {},
"$name": "phone",
"$options": {
"updateOn": "blur",
"updateOnDefault": false
}
}
Seems that my problem is that I'm mixing jQuery and Angular approaches, and in the way I have messed the model view. Any thoughts on how could I fix this?
Thanks for the effort :)
Have you tried with the change event in this case.
$(formSelector).on('change', '#field_phone_pasar', function(){
$("#field_phone").val($(this).intlTelInput("getNumber"));
});
Also, bind is from earlier versions. Not a bad idea to include your jQuery version.
Second note: Don't use angular to solve one problem. It's usually a "design" choice but it appears to me you are free ^^
The hidden input should have the same value for the id and name attributes.
You set up the id attribute with the value field_phone and name attribute with the value phone, which is probably the cause of the confusion. This means that the element you're testing in the browser (id="field_phone"), will not be the element you receive on the server (name="phone").
More information here. Try instead setting up your hidden input like so...
<input type="hidden" class="form-control form-control-200" name="field_phone" id="field_phone" ng-model="vm.form.phone" />
Also, try using the form's onsubmit event to set up the data to be sent to the server.
$( "form" ).submit(function( event ) {
$("#field_phone").val($(this).intlTelInput("getNumber"));
});
Doing it this way, is better because your code will no longer be dependent on an onblur or an onchange event on the #field_phone_pasar field.
Related
I have a little challenge when testing a website. Just wanted to see if you folks have any suggestions on this. The story behind this is that I need to mask the input fields for the screenshots when the test has been executed as we are sharing the data with other teams. Before the script I am running JS with 'document***.type="password";', but when script starts to type, then input type is changed back to the type of text. Also, class changes from class="is-invalid" to class="is-focused is-invalid" when it's active. Also, I could of course change the type after I have typed the value, but even tho when I click the next field, the class changes. When I have filled the first input field it checks the data against the server and the class is of course changed.
I have an input field when inactive:
<input ref="input" value="input field" id="id-for-unified-text-input--14fe" name="unified-text-input-14fe" type="text" autocomplete="off" spellcheck="false" placeholder="ABC123" class="is-invalid">
And the input field when active"
<input ref="input" value="input field" id="id-for-unified-text-input--14fe" name="unified-text-input-14fe" type="text" autocomplete="off" spellcheck="false" placeholder="ABC123" class="is-focused is-invalid">
Any suggestions from a fellow testers, how could I fix this? Thanks a lot in advance!
As pretty much evident from the HTML the <input> field whenever recieves the focus_ the classname is-focused added.
This addition of classname is pretty much controled through the attributes, presumably the css_properties of the parent elements.
As as conclusion, it would be difficult to mask the password field characters from the clientside and have to be controled from the Application Server side.
I have tried using autocomplete false and also auto complete off. The cache is removed from the field, but iam still seeing chrome autofill data. Is there a way to disable chrome autofill option in angular forms? Any suggestions would be appreciated. Thanks
Please check the autocomplete="new-password":
<input type="password" name="password" value="" autocomplete="new-password" />
It worked for me. Found in Google documentation
The autocomplete="off" is effectively respected by Chrome, but what you're experiencing is the Chrome autofill functionality that takes over, ignoring autocomplete="off": https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill.
In the past, many developers would add autocomplete="off" to their form fields to prevent the browser from performing any kind of autocomplete functionality. While Chrome will still respect this tag for autocomplete data, it will not respect it for autofill data.
One workaround is to put an unknown value in the autocomplete, e.g. <input type="text" name="somethingAutofillDoesntKnow" autocomplete="doNotAutoComplete" />. When testing this it worked for me most of the time, but for some reason didn't work anymore afterwards.
My advise is not to fight against it and use it's potential by properly using the autocomplete attribute as explained here: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
Through some trial and error testing, it appears that if you set the input name and autocomplete attributes to a random string, Chrome's autofill is prevented from appearing. I created a small directive to achieve this.
import { Directive, ElementRef, Renderer2, AfterViewInit } from '#angular/core';
#Directive({
selector: '[appDisableAutofill]'
})
export class DiableAutofillDirective implements AfterViewInit {
constructor(private readonly el: ElementRef, private readonly renderer: Renderer2) { }
ngAfterViewInit() {
const randomString = Math.random().toString(36).slice(-6);
this.renderer.setAttribute(this.el.nativeElement, 'name', randomString);
this.renderer.setAttribute(this.el.nativeElement, 'autocomplete', randomString);
}
}
Just change your input from type TEXT to type SEARCH.
<input type="search" name="your_address" autocomplete="nope" />
Chrome fill work with text fields but it's ignored on search type.
Chrome seems to ignore all practical/clean attempts to stop this - so we need to get a little hacky. I prevented this using 2 honeypot inputs. They can NOT be "display:none" or they will get skipped. So I wrapped them in a div that's height:0; overflow:hidden; and gave them opacity 0 (just to be double sure). Your real inputs must come AFTER the honeypots. See below
<!-- honeypot prevents chrome user autofill bs-->
<div style="height:0; overflow:hidden">
<input style="opacity:0;" type="email" value="" class="" />
<input style="opacity:0;" type="password" value="" class="d-" />
</div>
<!-- end honeypot -->
<!-- ... then put your real inputs after-->
<input type="email" name="email" value="" class="" />
<input type="password" name="password" value="" class="d-" />
<!-- end honeypot -->
Disabling autocompletion
To disable autocompletion in forms, you can set the autocomplete attribute to "off":
You can do this either for an entire form, or for specific input elements in a form:
<form [formGroup]="exampleForm" autocomplete="off">
...
</form>
// or
<form [formGroup]="exampleForm">
<div>
<label >Credit card:</label>
<input type="text" id="cc" name="cc" autocomplete="off">
</div>
</form>
To Disable in Login Fields:
many modern browsers do not support autocomplete="off" for login fields:
to prevent autofilling of password fields, you can use
autocomplete="new-password"
I had similar issue, I was not able to resolved it with any of the solution maybe because I was using third party for Google places Autocomplete ngx-google-places-autocomplete
where autofill overlapping google suggested address. I was able to resolve it using focus event as shown below
<input ngx-google-places-autocomplete [options]='options' #placesRef="ngx-places" (onAddressChange)="handleAddressChange($event)"
type="text" class="form-control" id="address1"
formControlName="address1" placeholder="Street address, P.O. box" required (focus)="setAutoFillOff($event)">
setAutoFillOff(event: any) {
if (event) {
event.target.attributes['autocomplete'].value = 'chrome-off';
}
}
I am putting out this to helps who might be in similar situation.
It appears that autocomplete="off" can be used directly on form tag.
Useful when you have a lot of text inputs
<form [formGroup]="vmForm" autocomplete="off">
Google Chrome Version 78.0.3904.108
TLDR; Don't label your inputs with obvious names or Chrome will pick that up and autofill the input.
I often use a form-group class to wrap my labels and inputs together, pretty common practice. So much so the only way I found to get around AutoFill in Chrome (Angular 8, Chrome v80) was to change the value of my label for the input.
Turns Off AutoFill:
<div class="form-group">
<label for="aRandomPlace" class="form-group-label">Pickup Location</label>
<input type="text" name="aRandomPlace" [(ngModel)]="data.address" class="form-group-input">
</div>
Does Not Turn Off AutoFill:
<div class="form-group">
<label for="address" class="form-group-label">Pickup Address</label>
<input type="text" name="address" [(ngModel)]="data.address" class="form-group-input">
</div>
I believe we are discussing to disable 'autosuggestions' not 'autocomplete'
"Autocomplete=off" works for the text type input field but the browser ignores it if it is password type. there are lot many suggestions to use "Autocomplete='chrome-off', 'new-password'" but these are not meant to disable autosuggestions.
for these, I prefer masking technique to mask the content.
.autocompleteOff{
-webkit-text-security: disc;
}
<input class='autocompleteOff' type=text>
Just add to all the HTML input tag which is being auto filled within a form tag as bellow:
<input type="text" class="form-control" id="inputId"
name="inputName" autocomplete="new-inputName"
[(ngModel)]="model">
Note: Use "new-form_element_name" as autocomplete property as shown above.
It worked for me!!!
I found the answer in documentation and it works like a charm.
You can find more about it here.
<input type="text" autocomplete="off" name="one-time-code" id="one-time-code">
Usually what I do is I change type of input dynamically for example in Angular:
[type]="(field.length > 0)? 'password' : 'text'"
In this manner, the browser is unable to recognise the password field the first time you click it and will not provide a suggestion. However, if the field value has been input once and then erased, the browser will provide a suggestion. (At least it is not providing suggestion for the first time).
I have searched for a solution all over, so here is my first question to this site:
I am trying to have some nice validation in angular (ionic) page where the logic is I want to show a "Required" message under label when either there is a validation error ($error.required) OR the field has not been touched and is empty (like a first time load). I can use pristine to check if it is not been modified, but if the form loads values from the model subsequently (like when restoring from localstorage), it still shows the "required" validation message.
I have tried the following:
<form name="wdform" novalidate>
<label class="item item-input item-stacked-label">
<span class="input-label green-small">ID</span>
<div class="validation" ng-show="wdform.userid.$error.required ||
(wdform.userid.$pristine && wdform.userid.length < 1)" >
Required
</div>
<input name="userid" ng-model="input.UserID" type="text" required>
</label>
... rest of form...
</form>
Also have tried:
<div class="validation" ng-show="wdform.userid.$error.required ||
(wdform.userid.$pristine && input.UserID.length < 1)" >
and various other permutations such as:
(wdform.userid.$pristine && input.UserID == '')
(wdform.userid.$pristine && wdform.userid.$invalid)
etc. ad nauseum.
On a separate but related note, I have also found that the built in validation is pretty brittle when it comes to form and field names... it only seems to work at all if the form name is only lowercase and/or contains no special characters ("DumbForm" and "dumb-form" fails, but "smartform" works).
Anyway, does anyone have any thoughts?
I feel like your two scenarios, (1) $error.required and (2) pristine and empty, might be redundant. Anytime #2 would be true, so would #1. I think you could use just #1.
Look at this example:
http://plnkr.co/edit/PgQ3vEIOKkfA38dDWjhp?p=preview
<body ng-controller="myController as vm">
<h1>Hello Plunker!</h1>
<form name="wdform">
<input type="text" name="userid" ng-model="userId" required/>
<div ng-show="wdform.userid.$error.required">Required</div>
</form>
</body>
However, it sounds like you are populating your form on page load some times from localStorage and somehow this is not causing the $error.required property to be changed to true, but it should. So your real problem I think lies in need to call $scope.$apply() or something to tell angular to run validations again.
I found that the issue was related to where the validation div was placed.
If the validation div was placed before the input field (so that it displayed the validation message beneath the field label), I encountered the error specified in this question.
By placing it after the input tag, it works as expected (with the validation message beneath the input field).
I would consider this a bug either in Angular or Ionic. Hopefully it will be corrected in the upcoming version 2 of both.
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="f3.form.reset()">
Just add the click in the button.so form loads values from the model in reset().Once click the button form will reset. You get new form with no errors.
I've got the following div, which I want to add the bootstrap's class "has-error" if the input length is over 50 characters. This is the HTML:
<div class="form-group" ng-class="{has-error:[formData.titulo.$error]}">
<label for="inputTitulo">Título</label>
<input type="titulo" class="form-control" id="inputTitulo"
maxlength="50" ng-maxlength="50" ng-model="formData.titulo">
</div>
How can I make this work? I guess when you reach 50 characters, ng-maxlength throws a error, like the $error object, but I have no clue on what object is, how to access it, and if I have to do some more work in the controller or directive.
Any help here? I can't find any "easy" info regarding this issue and Angular validators.
edit 1:
I've seen all your responses, learned something new thanks to you, but this is still somehow not working. It currently is this way:
<div class="form-group" ng-class="{'has-error': formData.titulo.$error.maxlength}">
<label for="inputTitulo">Título</label>
<input type="titulo" class="form-control" id="inputTitulo" maxlength="50" ng-maxlength="50" ng-model="formData.titulo">
</div>
Also tested checking the length directly, as one of you suggested. But none of these solutions seem to work: it never adds the has-error class. Why?
To have the errors published on the scope, a form directive is required.
<div ng-form="form1" ng-class="{'has-error': form1.text1.$error.maxlength}">
<input name="text1" ng-model="formData.foo" ng-maxlength="50">
</div>
(Notice that the above uses the name attribute of the input to publish the form data - really, the ngModelController - on the scope)
So, the above works, and it's preferable if you do form validation. But, if you just need to check the length of some input, you don't have to use form validation - you could just check the model directly:
<div ng-class="{'has-error': formData.foo.length > 50}>
<input ng-model="formData.foo">
</div>
as you are using ng-model to make validations ,, this class ng-invalid will be added to your input
docs : https://docs.angularjs.org/api/ng/directive/ngModel
to use $error you need to access it using forms and names not ng-model ,, and the ng-class should be bound to the $error.maxlength not $error only
tutorial : https://scotch.io/tutorials/angularjs-form-validation
If you use the maxlength, a user will never be able to enter more characters than that, so you will never get the ng-maxlength error. It doesn't make sense to use maxlength and ngMaxlength together IMHO.
See the example on docs.angularjs.org/api/ng/directive/ngMaxlength (open the example in plunker and add maxlength attribute)
I was wondering if someone knows what controls the showing of previous form field entries in a form.
So for example, if in the name field, I go to type 'John' it appears below the field. Is that a feature of the browser or is it javascript or something?
Also, if it is the browser, is there a way I can turn this off for a given form?
You might be looking at autocomplete, if so turn it off with autocomplete="off" within the HTML of the relevant field:
<input type="text" name="firstname" autocomplete="off" />
References:
input element.
It's made by the browser, if you're working with HTML5 you can set a attribute to the input-element to remove it.
<input type="text" autocomplete="off" />