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>
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 using ng-message for validation. when I click on forgot PIN its validation both field but I want only account number field. But when I click on "LOGIN TO PAYBACK AND REDEEM" it should validate both.
my form is like this
<form class="row" ng-if="!$ctrl.paybackLoggedin" name="paybackForm" novalidate>
<div class="col-sm-8 col-md-5">
<div class="form-group" ng-class='{ "has-success" : paybackForm.paybackalias.$valid, "has-error": paybackForm.paybackalias.$invalid && (paybackForm.$submitted || paybackForm.paybackalias.$dirty), "is-empty": !paybackForm.paybackalias.$viewValue }'>
<input class="form-control" name="paybackalias" pattern="\d{10}|\d{16}" ng-model="$ctrl.paybackAlias" placeholder="Mobile Number / Payback Card Number" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' ng-minlength="10" ng-maxlength="16" required>
<div ng-show="paybackForm.paybackalias.$invalid && !paybackForm.paybackalias.$pristine" ng-messages="paybackForm.paybackalias.$error" class="help-block">
<span ng-message="required">This field is required</span>
<span ng-message="maxlength || minlength">Enter a valid Phone number or Payback account</span>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2">
<div class="form-group" ng-class='{ "has-success" : paybackForm.paybackpin.$valid, "has-error": paybackForm.paybackpin.$invalid && (paybackForm.$submitted || paybackForm.paybackpin.$dirty), "is-empty": !paybackForm.paybackpin.$viewValue }'>
<input class="form-control" name="paybackpin" ng-model="$ctrl.paybackPin" placeholder="Payback PIN" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' ng-minlength="4" ng-maxlength="4" required>
<div ng-show="paybackForm.paybackpin.$invalid && !paybackForm.paybackpin.$pristine" ng-messages="paybackForm.paybackpin.$error" class="help-block">
<span ng-message="required">This field is required</span>
<span ng-message="maxlength || minlength">Enter a valid PIN number</span>
</div>
<small class="help-block text-right"><button class="btn-link-default" ng-click="paybackForm.paybackalias.$valid && $ctrl.paybackForgotPass()">Forgot PIN</button></small>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<button class="btn btn-block btn-default" ng-click="paybackForm.$valid && $ctrl.paybackLogin()">LOGIN TO PAYBACK AND REDEEM</button>
</div>
</div>
</form>
Since you are using the client side validation on the html you cant pick and choose what will validate, in you'r case i'l suggest to do the validation on you'r on in the submit function for example,
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.
I have two forms in a separate accordion. The first form is an individual information form and the other one is a company information form. Here is the code:
<div class="col-md-10 col-sm-12 col-md-offset-1">
<section class="basic-info">
<div class="heading text-center">
<h1>Basic Information</h1>
<p>Register as an individual OR as a company</p>
</div>
<div class="separator"></div>
<div class="custom-accordion">
<accordion close-others="oneAtATime">
<accordion-group is-open="status.isFirstOpen">
<accordion-heading>
Individual Information<i class="pull-right" ng-class="{'fa fa-angle-down': status.isFirstOpen, 'fa fa-angle-right': !status.isFirstOpen}"></i>
</accordion-heading>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>First Name</label>
<input type="text" ng-disabled="(user.company_name.length > 0 || user.company_number > 0) && (SignUpForm.company_number.$dirty || SignUpForm.company_name.$dirty) " class="form-control input-md" ng-model="user.first_name" name="first_name" placeholder="First Name" required>
</div>
<div ng-messages="SignUpForm.first_name.$error" ng-if="SignUpForm.first_name.$dirty">
<div ng-message="required">
<span>Please enter first name</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Last Name</label>
<input type="text" ng-disabled="(user.company_name.length > 0 || user.company_number > 0) && (SignUpForm.company_number.$dirty || SignUpForm.company_name.$dirty) " class="form-control input-md" ng-model="user.last_name" name="last_name" placeholder="Last Name" required>
</div>
<div ng-messages="SignUpForm.last_name.$error" ng-if="SignUpForm.last_name.$dirty">
<div ng-message="required">
<span>Please enter your last name</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Salutation</label>
<select class="form-control input-md" ng-disabled="(user.company_name.length > 0 || user.company_number > 0) && (SignUpForm.company_number.$dirty || SignUpForm.company_name.$dirty)" ng-model="user.salutation" name="salutation" required>
<option value="">Select Salutation</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
</select>
</div>
<div ng-messages="SignUpForm.salutation.$error" ng-if="SignUpForm.salutation.$dirty">
<div ng-message="required">
<span>Please select a salutation</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Middle Name</label>
<input type="text" ng-disabled="(user.company_name.length > 0 || user.company_number > 0) && (SignUpForm.company_number.$dirty || SignUpForm.company_name.$dirty)" class="form-control input-md" ng-model="user.middle_name" name="middle_name" placeholder="Middle Name" required>
</div>
<div ng-messages="SignUpForm.middle_name.$error" ng-if="SignUpForm.middle_name.$dirty">
<div ng-message="required">
<span>Please enter your middle name</span>
</div>
</div>
</div>
</div>
</accordion-group>
<accordion-group is-open="status.open">
<accordion-heading>
Company Information<i class="pull-right" ng-class="{'fa fa-angle-down': status.open, 'fa fa-angle-right': !status.open}"></i>
</accordion-heading>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Company Name</label>
<input type="text" ng-click"check()" class="form-control input-md" ng-model="user.company_name" name="company_name" placeholder="Company Name" required
ng-disabled="(user.first_name.length > 0 || user.last_name.length > 0 || user.middle_name.length > 0 || user.salutation.length > 0) && (SignUpForm.middle_name.$dirty || SignUpForm.first_name.$dirty|| SignUpForm.last_name.$dirty || SignUpForm.salutation.$dirty)">
</div>
<div ng-messages="SignUpForm.company_name.$error" ng-if="SignUpForm.company_name.$dirty">
<div ng-message="required" >
<span>Please enter a company name</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Company Number</label>
<input type="text" class="form-control input-md" ng-model="user.company_number" name="company_number" placeholder="Company Number" required ng-disabled="(user.first_name.length > 0 || user.last_name.length > 0 || user.middle_name.length > 0 || user.salutation.length > 0) && (SignUpForm.middle_name.$dirty || SignUpForm.first_name.$dirty || SignUpForm.last_name.$dirty || SignUpForm.salutation.$dirty)">
</div>
</div>
<div ng-messages="SignUpForm.company_number.$error" ng-if="SignUpForm.company_number.$dirty">
<div ng-message="required">
<span>Please enter company number</span>
</div>
</div>
</div>
</accordion-group>
</accordion>
</div>
<div class="navigation-btns text-center">
<a ui-sref="form.accountInfo" class="btn btn-info back-btn" ng-click="update(15)">Back</a>
<a ui-sref="form.address" class="btn btn-info continue-btn" ng-click="update(31)">Save and Continue</a>
</div>
<div class="clearfix"></div>
<div class="separator"></div>
</section>
The user should only be able to fill out one of the forms and the other one should be disabled. I am using ngdisabled to accomplish this.
Additionally, I am using $scope.$watchCollection to watch the input fields so that if the user enters a value in at least one of
the input fields of one of the individual information form and then decides to clear
what they have entered and fill out the company information form instead. The error messages that are shown in individual form should have been reset to pristine
based on the following code:
$scope.$watchCollection('[user.company_name,user.company_number,user.first_name,user.last_name,user.middle_name,user.salutation]',function(newValue){
//set individual form inputs to pristine
if(newValue[0].length > 0 || newValue[1] > 0 ){
$scope.SignUpForm.first_name.$setPristine();
$scope.SignUpForm.last_name.$setPristine();
$scope.SignUpForm.middle_name.$setPristine();
$scope.SignUpForm.salutation.$setPristine();
}
//set company form inputs to pristine
if((newValue[2].length > 0) || (newValue[3].length > 0) || (newValue[4].length > 0) || (newValue[5].length > 0)){
$scope.SignUpForm.company_name.$setPristine();
$scope.SignUpForm.company_number.$setPristine();
}});
What I have done so far partially works, the first if conditional statement block within $scope.$watchCollection should set the form
fields of first_name, last_name, middle_name and salutation to pristine if the company name or the company number has a value.
When I enter a value into the company_name input field, any of the input fields that has an error message in the individual form got cleared.
However, if I enter a value into the company_number input field first, none of the error messages got cleared.
The second if statement block does not even work probably either. What could I be doing wrong? Thanks in advance.
I'm working on form validations in angularjs and so far i have completed 99%. But the issue is my form validation works correct only for first time submit only. it's confusing to explain but i'll try my best to explain :P .here it is. When i reset my form it is showing error messages that the fields are empty(As it should).like this
After that if i fill 2 fields and submit again i'll work correctly as it should.like this
Now my problem comes.If i reset my form (fields get cleared) and submit the form, only description field error is shown but not in other two.like this
My code
<form name="userForm" ng-submit="submitForm(userForm.$valid, user)" novalidate>
<!-- NAME -->
<div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && userForm.name.$dirty && submitted || (userForm.name.$invalid && userForm.name.$pristine) && submitted }">
<label>Name*</label>
<input type="text" name="name" class="item-input-wrapper" ng-model="user.name" required>
<label><p ng-show="submitted && userForm.name.$error.required" class="help-block "><font color="#009ACD">You name is required.</font></p></label>
</div>
<!-- EMAIL -->
<div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && userForm.email.$dirty && submitted || userForm.email.$invalid && userForm.email.$pristine && submitted }">
<label>Email</label>
<input type="email" name="email" class="item-input-wrapper"ng-model="user.email" required >
<label><p ng-show="userForm.email.$invalid && userForm.email.$dirty && submitted || userForm.email.$invalid && userForm.email.$pristine && submitted" class="help-block"><font color="#009ACD">Enter a valid email.</font></p></label>
</div>
<!-- DESCRIPTION -->
<div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && userForm.username.$dirty && submitted || userForm.username.$invalid && userForm.username.$pristine && submitted }">
<label>Description</label>
<input type="text" name="username" class="item-input-wrapper" ng-model="user.username" ng-minlength="5" ng-maxlength="60" required>
<label><font color="white"><p ng-show="userForm.username.$error.minlength && submitted" class="help-block"><font color="#009ACD">Description is too short.</font></p></label>
<label><p ng-show="userForm.username.$error.maxlength && submitted" class="help-block"><font color="#009ACD">Description is too long.</font></p></label>
<label><p ng-show="submitted && userForm.username.$error.required" class="help-block "><font color="#009ACD">Description is required.</font></p></label>
</div>
<div class="col"style="text-align: center">
<button align="left"class="button button-block button-reset" type="reset" value="Reset" style="display: inline-block;width:100px;text-align:center "
ng-click="submitted=false" padding-top="true">Reset</button>
<button class="button button-block button-positive" style="display: inline-block;width:100px "
ng-click="submitted=true" type="submit" padding-top="true">Submit</button>
</div>
</form>
</div>
$setPristine(); may be useful for what you looking for. Try to add like this as shown below...
<button class="button" type="reset" ng-click="form.$setPristine()">Reset</button>
For further information and for working demo refer the below link
AngularJS does not proper handle button type="reset"?
you can also refer the below link for setting up the form to pristine state
Reset form to pristine state (AngularJS 1.0.x)
figured out the solution
inside your controller add this
$scope.reset = function() {
$scope.user = angular.copy($scope.orig);
$scope.userForm.$setPristine();
};
Here 'userForm' should be your form name and 'user' should be your model.
This works for me.try it.
<form name="forms.sample" novalidate>
<md-input-container class="md-block" flex-gt-sm>
<label>Name:</label>
<input ng-focus="focus=true" ng-blur="focus=false" style="width:400px;" class="form-control" name="Name" type="text" data-ng-model="Name" ng-pattern="SomePattern" required placeholder="enter the Name here" />
<div ng-messages for="forms.sample.Name.$error" ng-if="!focus">
<div ng-if='forms.sample.Name.$touched' ng-message="required">This is required.</div>
<div ng-if='forms.sample.Name.$touched' ng-message="pattern">Enter a valid domain name</div>
</div>
</md-input-container>
</form>