I cant seem to figure out what the issue is I have a form input like so..
<div class="form-group">
<label class="form-label" for="password">Change Password</label>
<input type="password" class="form-control" id="password" name="password" [(ngModel)]="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$#$!%*?&])[A-Za-z\d$#$!%*?&]{8,}">
</div>
and then below it I have..
<div *ngIf="!password.valid && (password.dirty || password.touched)" class="password-reminder">
<p>Your password must be over 8 characters and include an uppercase letter, a number and a special character</p>
</div>
now if I dont have a valid password and its been touched nothing happens, but I do know the validation is working because the button on my form is disabled until I put the password In correctly..
Not sure what I'm doing wrong? why wont the div show itself??
EDIT
It works if I take away && (password.dirty || password.touched) but I only want to show the message If they enter a not valid password and untouch..
I can see in my dev tools that the classes are being applied
but it doesnt dissapear when my password is valid..
EDIT 2
I am using template driven forms
Any help would be appreciated.
Create a template reference variable on your Input field.
<input #passwordField="ngModel" type="password" class="form-control" id="password" name="password" [(ngModel)]="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$#$!%*?&])[A-Za-z\d$#$!%*?&]{8,}">
Make sure to update the references to password with passwordField in your template.
<div *ngIf="!passwordField.valid && (passwordField.dirty || passwordField.touched)" class="password-reminder">
<p>Your password must be over 8 characters and include an uppercase letter, a number and a special character</p>
</div>
Since you are using template driven forms, there is no corresponding password property in your component, and hence most use a template reference variable. You can find a demonstration of this method here.
Try this.
Add this part to the input field(a template reference variable)
#passwordField="ngModel"
<div class="form-group">
<label class="form-label" for="password">Change Password</label>
<input type="password" class="form-control" id="password" name="password" [(ngModel)]="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$#$!%*?&])[A-Za-z\d$#$!%*?&]{8,}" #passwordField="ngModel">
</div>
<div *ngIf="!passwordField.valid && (passwordField.dirty || passwordField.touched)" class="password-reminder">
<p>Your password must be over 8 characters and include an uppercase letter, a number and a special character</p>
</div>
Then it should work. Read more about template driven forms in here.
As Others said You should use an element variable like #passwordElement="ngModel"
have a look at stackblitz
As others have said, you need to provide the template reference in your password div:
#password=ngModel
Also add required to your password tag like so:
<input type="password" class="form-control" id="password" name="password" [(ngModel)]="password" #password=ngModel pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$#$!%*?&])[A-Za-z\d$#$!%*?&]{8,}" required>
I just tested it out and it works on my end.
Create a temp reference variable. something like
<input #password=ngModel />
then use #password to do validation. Also make sure you are applying touched and dirty class correctly.
Related
I validate my angular form using below code
<div class="form-group">
<input type="text" minlength="12" maxlength="12" name="accountno" #accountNo="ngModel" required class="form-control" pattern="^[0-9]*$"
[(ngModel)]="registerUser.accountNo" [class.is-invalid]="accountNo.invalid && accountNo.touched"
placeholder="Account No.">
<div [class.d-none]="accountNo.valid || accountNo.untouched">
<small *ngIf="accountNo.errors?.required" class="text-danger">Account No. is required</small>
<small *ngIf="accountNo.hasError('pattern')" class="text-danger">Accout No. should be 12 numbers</small>
<small *ngIf="accountNo.hasError('minlength')" class="text-danger">Accout No. must be at least 12 Numbers.</small>
</div>
</div>
When I typing letters in the textbox, two validations fire in same time. please check below image
how i load my validations one by one.. thanks
This is the correct behavior, since the text you provided is not a valid number and it has less than 12 characters.
Use NgSwitch instead of ngIf and some function call that returns the first key of formControl.errors object I think it can help
I am using following code where I need to match the passwords inside a form. It doesn't work on most of helps provided on here and other websites. I could have missed something that I am unable to trace. Please help me with this.
HTML
<form id="user_form" class='has-validation-callback'>
<input type="password" name="pass_confirmation" class="form-control" data-validation="length" data-validation-length="min6">
<input type="password" name="pass" id="pass" class="form-control" data-validation-confirm="confirmation" data-validation-help="Please give us some more information">
</form>
JavaScript
$.validate({
modules : 'security',
form : '#user_form',
onError : function() {
alert('Sorry! Please complete the form fields.');
}
});
Link to library
http://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.19/jquery.form-validator.js
Please refer password confirmation
This validator can be used to validate that the values of two inputs are the same. The first input should have a name suffixed with _confirmation and the second should have the same name but without the suffix.
<input type="password" name="pass_confirmation" class="form-control" data-validation="length" data-validation-length="min6">
<input type="password" name="pass" id="pass" class="form-control" data-validation="confirmation" data-validation-help="Please give us some more information">
for the second input change attribute data-validation-confirm="confirmation" to data-validation="confirmation" it will work.
Working fiddle
Try using a newer version of the library as it seems there may be a bug.
I was using the same version you had listed and received the same error. https://github.com/victorjonsson/jQuery-Form-Validator/issues/479
Here is the basic format of html input
<input id="Password1" type="password" />
It displays text instead of password type.
That looks right. Do you have a link to an example? Maybe it's other html that isn't closed properly. I'd switch type and id just to see if it makes any difference.
I resolved the issue
If you add placeholder in <input id="Password1" type="password" placeholder="type your password" /> it will work in any condition .
I wanna use the polymer elements and my problem is that paper-input does not support type="password", so how is it possible to convert my input characters to *
onedit, get new character, add it to a string, delete the character from textbox and add "*".
i am using paper-input with type="password" without issue. how you do it depends on the version of polymer you are using.
from master
<paper-input-decorator
id="password"
labelVisible
floatinglabel
error="Password must be 8 chars with numbers, letters and punctuation"
label="Password">
<input is="core-input" id="passWord" type="password" pattern="^(?=.*\d.*\d)[0-9A-Za-z!##$%*]{8,}$" required>
</paper-input-decorator>
from 0.4.2
<paper-input
id="passWord"
floatinglabel
pattern="^(?=.*\d.*\d)[0-9A-Za-z!##$%*]{8,}$"
type="password"
label="Password"
required>
</paper-input>
i had a post about this right after the change came up and i explain how i used the changes in the answer. updated to newest version of polymer and input validation is no longer working
I am creating a registration page and i have jquery so if an element isn't filled in or passwords don't match then it should put some text into the span element next to the element.
At the moment it doesn't seem to be updating the span and i cant see why. I will also be doing client side on this after doing my JS before people say to do that.
I have created a fiddle, I need to change the JS as i only have one spanclass for each row now but i can't get it to work.
Help would be appreciated.
Here is the fiddle
http://jsfiddle.net/e9gs4/
<input type="password" name="password" id="password" class="password" placeholder="Password">
<input type="password" name="repassword" id="password" class="password" placeholder="Confirm Password"><span class"val_pass2"></span></br>
There is a syntax error in span. Use = to declare class
<span class="abc">
When testing for empty password or repassword, you are using a single equals sign instead of a double, meaning you are assigning the empty value to both password and repassword instead of comparing to it. Should be like this
if (password == "") {
and this...
if (repassword == "") {
Also, you are missing an equals sign in some of your spans. Should be like this:
<span class="val_pass2">