I have an issue using ngCapsLock module in Angular.js.I need capslock on message only on password filed but here when i am pressing capslock in any other field of my form rather than password field the message is also displaying.Please check my code.
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Email Id :</span>
<div ng-class="{ 'has-error': billdata.email.$touched && billdata.email.$invalid }">
<input type="email" name="email" id="contactno" class="form-control" placeholder="User email" ng-model="user_email" ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" >
</div>
</div>
<div class="help-block" ng-messages="billdata.email.$error" ng-if="billdata.email.$touched">
p ng-message="email" style="color:#F00;">This needs to be a valid email</p>
<p ng-message="pattern" style="color:#F00;">This field needs valid email format(e.g-abc#gmail.com).</p>
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Password :</span>
<div ng-class="{ 'has-error': billdata.pass.$touched && billdata.pass.$invalid }">
<input type="password " name="pass" id="contactno" class="form-control" placeholder="password" ng-model="password" ng-minlength="8" ng-pattern="/^(?=.*[A-Z])(?=.*\d)(?=.*[a-z]).*_.*/" >
</div>
</div>
<div class="help-block" ng-messages="billdata.pass.$error" ng-if="billdata.pass.$touched">
<p ng-message="minlength" style="color:#F00;">This field is too short.The min length of your password should be 8.</p>
<p ng-message="pattern" style="color:#F00;">This field needs the special character like at least one number,upper case,lower case letter and underscore.</p>
<p class="caps-lock-alert" ng-show='isCapsLockOn' style="color:#F00;">Capslock is on</p>
</div>
Here my requirement is when user will do caps lock on only in the password field the message will come.But here many other field like email,user name,etc..are there my problem is when user is doing caps lock on in any other field rather than password field the message is also coming which should not display.I have included the ngCapsLock.Please help me.
Related
I need to compare below new password field and confirm password field. This is the form
<form novalidate (ngSubmit)="changepasswordform.form.valid && changePassword(this.changepassword, changepasswordform)"
#changepasswordform="ngForm">
<div class="form-group row">
<label for="email5" class="col-sm-5 col-md-5 col-form-label">New Password</label>
<div class="col-sm-7 col-md-7">
<input type="password" class="form-control" pattern="^(?=.*[A-Za-z])(?=.*\d).{8,}$" required
[class.is-invalid]="newpassword.invalid && newpassword.touched" name="newpasswords"
#newpassword="ngModel" [(ngModel)]="changepassword.newPassword"
placeholder="New Password">
<div [class.d-none]="newpassword.valid || newpassword.untouched">
<small class=" text-danger" *ngIf="newpassword.errors?.required">Password is
required</small>
<small *ngIf="newpassword.hasError('pattern')" class=" text-danger">
Password should be 8 characters, at least one
letter and one number</small>
</div>
</div>
</div>
<div class="form-group row">
<label for="email5" class="col-sm-5 col-md-5 col-form-label">Confirm Password</label>
<div class="col-sm-7 col-md-7">
<input type="password" class="form-control"
[class.is-invalid]="repassword.invalid && repassword.touched" name="repassword"
#repassword="ngModel" placeholder="Confirm Password" compare="newpassword"
[(ngModel)]="changepassword.repassword" required>
<div [class.d-none]="repassword.valid || repassword.untouched">
<small *ngIf="repassword.errors?.required" class="text-danger">Confirm password is
required</small>
</div>
<div class="text-danger"
*ngIf="repassword.invalid && (repassword.dirty || repassword.touched)">
<small class="login-val" *ngIf="repassword.errors['compare']"> Confirm password do not
match</small>
</div>
</div>
</div>
</form>
When user type the text box, validation should be check. Do you know how to do this. I need to do this without any library.
Since you are not using reactive forms, you can directly perform a comparison between the models newPassword and repassword to set the error message.
Please refer following stackblitz.
Code: here
Output: here
I am trying to make a validation with ng-messages in AngularJs 1.6.4.
But as soon as I type in in the form it shows all 3 ng-messages, and after that they won't go away until a page refresh. So even when the maxlength isn't reached it shows "your name is required".
<form name="userForm" ng-submit="signup(userForm.$valid)" novalidate>
<!-- First name -->
<div class="form-group" ng-class="{ 'has-error' : userForm.first_name.$touched && userForm.first_name.$invalid }">
<label for="example-text-input" class="col-2 col-form-label">First Name</label>
<div class="col-10">
<input class="form-control" type="text" placeholder="Please enter your first name"
name="first_name"
ng-model="user.first_name"
ng-minlength="2"
ng-maxlength="25"
required>
<div class="help-block" ng-messages="userForm.first_name.$error" ng-if="userForm.first_name.$touched">
<p ng-message="minlength">Your name is too short.</p>
<p ng-message="maxlength">Your name is too long.</p>
<p ng-message="required">Your name is required.</p>
</div>
</div>
</div>
</form>
EDIT
Solved it by adding the ngMessages to my modules and adding the script tag in my index.html
Your code work for me perfectly. check plunker link
Injecte ngmessage in your desired module.
angular.module('app', ['ngMessages'])
add angular message file in your project.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.js"></script>
<input class="form-control" type="text" placeholder="Please enter your first name"
name="first_name"
ng-model="user.first_name"
minlength="2"
maxlength="25"
ng-required="true"/>
<div ng-messages="userForm.first_name.$error" ng-show="userForm.first_name.$touched" >
<span ng-message="required" class="error">Required</span>
<span ng-message="minlength">Minimum 2</span>
Maximum 25
</div>
I have two fields password and confirm password and an error message in tag i.e "password mismatch" but it should be displayed when password is typed incorrectly in confirm password field instead it is already being displaying when I opens the form.
HTML
<div class="form-group" ng-class="{ 'has-error': submitted && CreateClientAdminForm.password.$error.required || CreateClientAdminForm.password.$error.pattern }" >
<label class="col-md-4 control-label" for="password">Password*</label>
<div class="col-md-4">
<input id="password" name="password" type="password" placeholder="Password" class="form-control input-md" ng-model="clientAdmin.User.UserPassword" ng-pattern="regex.Password" ng-maxlength="20" required autofocus>
<span ng-show="submitted && CreateClientAdminForm.password.$error.required" class="help-block">Password can not be empty</span>
<span ng-show="CreateClientAdminForm.password.$error.pattern && CreateClientAdminForm.password.$invalid " class="help-block">Please enter a valid password with at least 6 characters. </span>
</div>
</div>
<!-- Password input-->
<div class="form-group" ng-class="{ 'has-error': submitted && CreateClientAdminForm.confirmpassword.$error.required || CreateClientAdminForm.confirmpassword.$error.pattern }" >
<label class="col-md-4 control-label" for="confirmpassword">Confirm Password*</label>
<div class="col-md-4">
<input id="confirmpassword" name="confirmpassword" type="password" placeholder="Password" class="form-control input-md" ng-model="clientAdmin.User.UserconfirmPassword" ng-pattern="regex.Password" ng-maxlength="20" required autofocus>
<span ng-show="submitted && CreateClientAdminForm.confirmpassword.$error.required" class="help-block">Password can not be empty</span>
<span ng-show="clientAdmin.User.UserPassword !== clientAdmin.User.UserconfirmPassword" class="help-block"><p>Password mismatch</p></span>
<span ng-show="CreateClientAdminForm.confirmpassword.$error.pattern && CreateClientAdminForm.confirmpassword.$invalid " class="help-block">Please enter a valid password with at least 6 characters. </span>
</div>
</div>
Controller
globalWeAlertApp.controller("ClientAdminController", function($scope, ClientAdminService,UserCRUDService, toastr, $cookieStore, $window ) {
//Other functions
}
<span
ng-show="clientAdmin.User.UserPassword != clientAdmin.User.UserconfirmPassword
&& (clientAdmin.User.UserPassword != '' &&
lientAdmin.User.UserconfirmPassword != '' )"
class="help-block">
<p>Password mismatch</p>
</span>
I have one issue in my password field and user name field using Angular.js.I have a login page.Suppose user clicked on remember me option of browser after the login.These saved user name and password is displaying on my username field and password field.I am explaining my code below.
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">User Name :</span>
<div ng-class="{ 'myError': billdata.uname.$touched && billdata.uname.$invalid }">
<input type="text" name="uname" id="uname" class="form-control" placeholder="add user Name" ng-model="login_name" ng-minlength="6" ng-keypress="clearField('uname');" tabindex="6" >
</div>
</div>
<div class="help-block" ng-messages="billdata.uname.$error" ng-if="billdata.uname.$touched">
<p ng-message="minlength" style="color:#F00;">This field is too short.The min length of your user name should be 6.</p>
</div>
<div class="input-group bmargindiv1 col-md-12" ng-hide="showpass">
<span style="position:absolute; right:5px; margin-top:6px; top:0px;"><button class="btn btn-xs btn-success"ng-mousedown="hideShowPassword();" ng-mouseup="hideShowPassword();" ng-mouseleave="hidePassAfterLeave();" ><i class="fa fa-eye"></i></button></span>
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Password :</span>
<div ng-class="{ 'myError': billdata.pass.$touched && billdata.pass.$invalid }">
<input type="{{inputType}}" name="pass" id="passno" class="form-control" placeholder="password" ng-model="password" ng-minlength="8" ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[_!##\$%\^&\*])(?=.{8,})/" ng-keypress="clearField('passno');" tabindex="7" >
</div>
The Login credentials used by user at the time of login is available where ever the username and password filed is found which i dont need.Here I need blank user name and password field even the user clicked remember me option of browser.Please help me to resolve this issue .
Try to add 2 hidden inputs to start of your form:
<form autocomplete="off">
<div style="display: none;">
<input type="text" id="PreventChromeAutocomplete"
name="PreventChromeAutocomplete" autocomplete="username" />
<input type="password" id="PreventChromePasswordAutocomplete"
name="PreventChromePasswordAutocomplete" autocomplete="password" />
</div>
<!-- Rest form -->
</form>
you can try this
<input type="password" autocomplete="off" />
try adding autocomplete="off" on your form also
<form autocomplete="off" ...></form>
Try using javascript as :
$('#passno').attr("autocomplete", "off");
or add (autocomplete="off") attribute in html input tag :
For more info, refer http://www.w3schools.com/tags/att_input_autocomplete.asp
Try same for username field as well. :)
I have this form with validation in AngularJS:
<form ng-app="myApp" ng-controller="validateCtrl as validate" name="myForm" action="sendEmail" novalidate>
<div class="form-group">
<input type="email" name="email" class="form-control" ng-model="validate.email" placeholder="Email" required>
<span style="color:yellow" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</div>
<div class="form-group">
<input type="text" name="subject" class="form-control" ng-model="validate.subject" placeholder="Subject" required>
<span style="color:yellow" ng-show="myForm.subject.$dirty && myForm.subject.$invalid">
<span ng-show="myForm.subject.$error.required">Subject is required.</span>
</span>
</div>
<div class="form-group">
<textarea type="text" name="message" class="form-control" ng-model="validate.message" placeholder="Message..." required></textarea>
<span style="color:yellow" ng-show="myForm.message.$dirty && myForm.message.$invalid">
<span ng-show="myForm.message.$error.required">Message is required.</span>
</span>
</div>
<button type="submit" class="btn btn-lg btn-success"
ng-disabled="myForm.email.$dirty && myForm.email.$invalid ||
myForm.subject.$dirty && myForm.subject.$invalid ||
myForm.message.$dirty && myForm.message.$invalid"></button>
</form>
The button is disabled until the email, subject and message aren't correct. Ok, it's fine. But that is true, only if I have already interacted with the form.
In fact, when the page is loaded the first time and I haven't interacted with the form yet, the button is enabled. So, if I click it, I could send an empy email! I would that when the page is loaded the button is disabled and when I fill the fields become enabled.
How can I do that?
Thanks.
You first condition can be ng-disabled=" myForm.email.$invalid . Remove "myForm.email.$dirty
Try like this
<form name="postForm" method="POST" novalidate>
<div class="col-md-8">
<div class="col-md-12">
<div class="col-md-12"><legend>Submit New Post</legend></div>
</div>
<div class="col-md-12 form-group">
<div class="col-md-12" ng-class="{ 'has-error' : postForm.title.$invalid && !postForm.title.$pristine }">
<input type="text" placeholder="Write Title" class="form-control" name="title" ng-model="post.title" required>
<p ng-show="postForm.title.$invalid && !postForm.title.$pristine" class="text-danger">* Write Post Title</p>
</div>
</div>
<div class="col-md-12 form-group">
<div class="col-md-12" ng-class="{ 'has-error' : postForm.url.$invalid && !postForm.url.$pristine }">
<input type="url" placeholder="Write URL" class="form-control" name="url" ng-model="post.url" >
<p ng-show="postForm.url.$invalid && !postForm.url.$pristine" class="text-danger">* Write URL in http:// or https:// Format</p>
</div>
</div>
<div class="col-md-12">
<div class="col-md-12" >
<p class="text-danger">{{msg}}</p>
</div>
</div>
<div class="col-md-12 form-group">
<div class="col-md-12"><button type="submit" class="btn btn-info" ng-disabled="postForm.$invalid" ng-click="submitForm(....)">Submit</button>
<img src="img/loading.gif" ng-show="loading" /></div>
</div>
</div>
</form>
On your submit button, modify the ng-disabled to this:
ng-disabled="myForm.$invalid || myForm.$pristine">
In this case, you don't have to validate all your inputs separetely. Just test if your form is invalid OR if the user never interacted with it yet.
A form in AngularJS has two different states: pristine and dirty. The pristine indicates that your form was never touched. And dirty is the opposite. When the user set any value to one of your inputs, the angular change the state of your form from pristine to dirty.
I guess this post is a good reference to read about forms in angular