ng-pattern passwords match - angularjs

hi am creating a register form and I want to check using angular if the passwords that the user has entered match. All my validations work (required, min & max length) but i always get the error that the passwords do not match.
My code is as follows
<div class="control-group">
<label class="control-label">Password</label>
<div class="controls" ng-class="{ 'has-error': addCustomerForm.password_1.$touched && addCustomerForm.password_1.$invalid }">
<input type="text" name="password_1" class="form-control input-lg" ng-model="newCustomerInfo.password_1" ng-minlength="4" ng-maxlength="12" required>
<div ng-messages="addCustomerForm.password_1.$error" ng-if="addCustomerForm.password_1.$touched">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">The password is too short.</div>
<div ng-message="maxlength">The password is too long.</div>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">Password (Confirm)</label>
<div class="controls" ng-class="{ 'has-error': addCustomerForm.password_2.$touched && addCustomerForm.password_2.$invalid }">
<input type="text" name="password_2" class="form-control input-lg" ng-model="newCustomerInfo.password_2" ng-minlength="4" ng-maxlength="12" ng-pattern="/^{{password_1}}$/" required>
<div ng-messages="addCustomerForm.password_2.$error" ng-if="addCustomerForm.password_2.$touched">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">The password is too short.</div>
<div ng-message="maxlength">The password is too long.</div>
<div ng-message="pattern">The passwords do not match.</div>
</div>
</div>
</div>
I am thinking that the problem might be in the ng-pattern="/^{{password_1}}$/" but i don't know how i can debug that so i can see the value of the ng-parent.
Any help will be much appreciated!
Andreas.

You want to use ng-pattern="{{newCustomerInfo.password_1}}". password_1 is not defined, and per the doc:
If the expression evaluates to a string, then it will be converted to a RegExp after wrapping it in ^ and $ characters. For instance, "abc" will be converted to new RegExp('^abc$') a.k.a /^abc$/.

Related

Firefox input email fills the next input text

I have a form in with name, surname, email and date of birth
The mail is a "pre-compiled" field but in firefox (ONLY in firefox) I see the email also in the date of birth
This is the code:
<div class="col-sm-6">
<div class="form-group" data-ng-class="{'has-error': nameErrInvalid}">
<input type="text" class="form-control" data-ng-model="name" placeholder="{{langfile[lang]['name_user']}}" data-ng-required="true"/>
</div>
</div>
<div class="col-sm-6">
<div class="form-group" data-ng-class="{'has-error': surnameErrInvalid}">
<input type="text" class="form-control" data-ng-model="surname" placeholder="{{langfile[lang]['surname_user']}}" data-ng-required="true"/>
</div>
</div>
<div class="col-sm-6"><!-- MAIL -->
<div class="form-group" data-ng-class="{'has-error': emailErrInvalid}"><!--placeholder="Email" data-ng-required="true"-->
<input type="email" class="form-control" data-ng-model="email" data-ng-disabled="emailDisabled"/>
</div>
</div>
<div class="col-sm-6"><!-- DATA -->
<div class="form-group" data-ng-class="{'has-error': dtErrInvalid}">
<input type="text" class="form-control" data-ng-model="date" placeholder="{{langfile[lang]['wizarddateholder']}}" data-ng-required="true"/>
</div>
</div>
firefox behaviour NOT OK
chrome behaviour OK

Angular JS Set focus and required validation, requires to click the link twice to open the link

Please refer my HTML form attached
var app = angular.module('main_app',['ngRoute',"angucomplete-alt","ngStorage",'ui-notification','ngSanitize'])
.factory('myService', function () {
return {
say: function ($scope) {
return "Hello World";
}
}
})
;
app.config(function(NotificationProvider) {
NotificationProvider.setOptions({
delay: 10000,
startTop: 20,
startRight: 10,
verticalSpacing: 20,
horizontalSpacing: 20,
positionX: 'right',
positionY: 'top'
});
});
app.controller('RegisterGuestController', function($scope,$routeParams,$http,$location,$rootScope,Notification){
$scope.book_id = $routeParams.id_book;
$scope.loginBlock = true;
$scope.lostPassword = false;
//console.log($scope.book_id);
$http({
url: base_url+"api_user/register_guest",
method: "GET",
params: {book_id: $scope.book_id}
}).success(function(data){
if(data.return_code==1){
$scope.bookDetails = data.data.bookDetails[0];
//alert ($scope.bookDetails.name);
$('#frm_name').focus();
} else {
Notification.error({message: data.data.message, title: 'Error'});
}
});
});
<html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script></head>
<body ng-cloak class="" ng-app="main_app" >
<div class="registration-page" ng-init="register_guest()" >
<form method="post" id="registrationForm" name="frmregisterGuest" novalidate >
<div class="row">
<div class="col-sm-6 ">
<div class="form-group required" ng-class="{ 'has-error' : frmregisterGuest.frm_name.$invalid && frmregisterGuest.frm_name.$touched}" >
<label for="txtfirstname">first_name</label>
<input type="text" name="frm_name" value="" id="frm_name" class="form-control" ng-blur="validate=true" ng-model="frm_name" title="Enter your first name." required ng-pattern="/^[a-zA-Z']*$/" ng-minlength="2" ng-maxlength="20">
<div ng-show="frmregisterGuest.frm_name.$error.pattern" class="help-block">Please enter only letters</div>
<div ng-show="frmregisterGuest.frm_name.$error.minlength" class="help-block">Min length of first name is 2</div>
<div ng-show="frmregisterGuest.frm_name.$error.maxlength" class="help-block">Min length of first name is 20</div>
<div ng-show="frmregisterGuest.frm_name.$touched && frmregisterGuest.frm_name.$error.required" class="help-block">Please enter first name</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group" ng-class="{ 'has-error' : frmregisterGuest.frm_middleName.$invalid && frmregisterGuest.frm_middleName.$touched}" >
<label for="txtmiddleName">middle name</label>
<input type="text" name="frm_middleName" id="frm_middleName" ng-blur="validate=true" ng-model="frm_middleName" class="form-control" title="Enter your middle name." ng-pattern="/^[a-zA-Z']*$/" ng-minlength="2" ng-maxlength="20">
<div ng-show="frmregisterGuest.frm_middleName.$error.pattern" class="help-block">Please enter only letters</div>
<div ng-show="frmregisterGuest.frm_middleName.$error.minlength" class="help-block">Min length of middle name is 2</div>
<div ng-show="frmregisterGuest.frm_middleName.$error.maxlength" class="help-block">Max length of middle name is 20</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group" ng-class="{ 'has-error' : frmregisterGuest.frm_lname.$invalid && frmregisterGuest.frm_lname.$touched}">
<label for="txtlastName">last name</label>
<input type="text" name="frm_lname" id="frm_lname" value="" class="form-control" ng-blur="validate=true" ng-model="frm_lname" title="Enter your last name." ng-pattern="/^[a-zA-Z']*$/" ng-minlength="2" ng-maxlength="20">
<div ng-show="frmregisterGuest.frm_lname.$error.pattern" class="help-block">Please enter only letters</div>
<div ng-show="frmregisterGuest.frm_lname.$error.minlength" class="help-block">Min length of last name is 2</div>
<div ng-show="frmregisterGuest.frm_lname.$error.maxlength" class="help-block">Min length of last name is 20</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group required" ng-class="{ 'has-error' : frmregisterGuest.frm_email.$invalid && frmregisterGuest.frm_email.$touched}">
<label for="txtemail">email</label>
<input type="email" name="frm_email" id="frm_email" value="" class="form-control" title="Enter your email address." ng-blur="validate=true" ng-model="frm_email" required ng-pattern="/^[^\s#]+#[^\s#]+\.[^\s#]{2,}$/">
<div ng-show="frmregisterGuest.frm_email.$touched && frmregisterGuest.frm_email.$error.required" class="help-block">Please enter eamil</div>
<div ng-show="frmregisterGuest.frm_email.$error.pattern" class="help-block">Please enter correct email</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group required" ng-class="{ 'has-error' : frmregisterGuest.frm_password.$invalid && frmregisterGuest.frm_password.$touched}" >
<label for="txtpassword">password</label>
<input type="password" name="frm_password" id="frm_password" value="" class="form-control" title="Enter your password ." ng-blur="validate=true" ng-model="frm_password" required ng-minlength="6" ng-maxlength="10" >
<div ng-show="frmregisterGuest.frm_password.$touched && frmregisterGuest.frm_password.$error.required" class="help-block">Please enter password</div>
<div ng-show="frmregisterGuest.frm_password.$error.minlength" class="help-block">Min length of password is 2</div>
<div ng-show="frmregisterGuest.frm_password.$error.maxlength" class="help-block">Max length of password is 20</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group required" ng-class="{ 'has-error' : frmregisterGuest.frm_password2.$invalid && frmregisterGuest.frm_password2.$touched}">
<label for="txtpassword2">confirm password</label>
<input type="password" name="frm_password2" id="frm_password2" class="form-control" title="Enter your confirm_password." ng-model="frm_password2" required>
<div ng-show="frmregisterGuest.frm_password2.$touched && frmregisterGuest.frm_password2.$error.required" class="help-block">Please enter confirm password</div>
<div ng-show="(!frmregisterGuest.frm_password2.$error.required) && frmregisterGuest.frm_password2.$touched && frmregisterGuest.frm_password2.$error.noMatch" class="help-block">password does not match</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group">
<p class="lostpassword">
lost your password
or
already registered
</p>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<input type="hidden" id="bookId" name="bookId" ng-value="{{bookDetails.id_book}}" value="{{bookDetails.id_book}}">
<input type="button" ng-click="doRegister()" id="register" name="register" value="Register" class="btn btn-primary" ng-disabled="frmregisterGuest.$invalid" >
</div>
</div>
</form>
</div></body></html>
I am setting focus to first field using following code in register_guest() JS function:
$('#frm_name').focus();
The form works fine When I am not using focus().
But by setting focus to first field, when I click the 'already registered' link, it displays 'required field error message' and does not redirect.
when I click second time on the same link, it redirects to required page.
I am using jquery version jquery-1.12.4 and AngularJS v1.4.1[enter image description here][1]
try to use attribute autofocus inside instead jquery focus()

how to display all error messages in the form header in angularjs

I need to display all the messages at the top of the form and I need to implement the custom error for fields like email and phone number.
index.html
<form name="adminForm" ng-submit="addAdmin()" novalidate>
all error messages need to be displayed here
<div class="form-group" ng-class="{ 'has-error': adminForm.firstName.$touched && adminForm.firstName.$invalid }">
<label>First Name</label>
<input type="text" name="firstName" class="form-control" ng-model="admin.first_name" ng-maxlength="255" required>
<div class="help-block" ng-messages="adminForm.firstName.$error" ng-if="adminForm.firstName.$touched">
<div ng-messages-include="messages.html"></div>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': adminForm.lastName.$touched && adminForm.lastName.$invalid }">
<label>Last Name</label>
<input type="text" name="lastName" class="form-control" ng-model="admin.last_name" ng-maxlength="255" required>
<div class="help-block" ng-messages="adminForm.lastName.$error" ng-if="adminForm.lastName.$touched">
<div ng-messages-include="messages.html"></div>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': adminForm.email.$touched && adminForm.email.$invalid }">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="admin.email" ng-maxlength="255" required>
<div class="help-block" ng-messages="adminForm.email.$error" ng-if="adminForm.email.$touched">
<div ng-messages-include="messages.html"></div>
</div>
</div>
messages.html
<p ng-message="required">This field is required</p>
<p ng-message="minlength">This field is too short</p>
<p ng-message="maxlength">This field is too long</p>
<p ng-message="email">This needs to be a valid email</p>
<p ng-message="pattern">This needs to be a valid number</p>
<p ng-message="equals">Password must be same</p>
I'm looking for any possible solution or a reference to other possible solutions.
Reason : I'm finding difficulty in implementing unit tests for this(noob), so i think a single error message can make it easy for testing.
Thanks!

ng-minlength Angular Form Validation

Angular seems to not be raising minLength or maxLength error in the below code... the required error (as well as the email error) is working however. I know ng-minlength and ng-maxlength is working because the input box is changing its CSS. The text inside the <span> is not working for the min or max errors.
See the password input below:
<section class="row" data-ng-controller="AuthenticationController">
<h3 class="col-md-12 text-center">Sign Up</h3>
<div class="col-xs-offset-2 col-xs-8 col-md-offset-5 col-md-2">
<form name="userForm" data-ng-submit="userForm.$valid && signup()" class="signin form-validate" novalidate autocomplete="off">
<fieldset>
<div class="form-group">
<span ng-show="userForm.email.$dirty && userForm.email.$error.required" class="text-danger">This field is required</span>
<span ng-show="userForm.email.$dirty && userForm.email.$error.email" class="text-danger">This field must be a valid email address</span>
</div>
<div class="form-group">
<label for="username" class="control-label">Username</label>
<input type="text" id="username" name="username" class="form-control" data-ng-model="credentials.username" placeholder="Username">
</div>
<div class="form-group">
<label for="password" class="control-label">Password</label>
<input type="password" id="password" name="password" class="form-control" required data-ng-model="credentials.password" ng-minlength="8" ng-maxlength="24" placeholder="Password">
<span ng-show="userForm.password.$dirty && userForm.password.$error.required" class="text-danger">This field is required</span>
<span ng-show="userForm.password.$dirty && userForm.password.$error.minLength" class="text-danger">Please use a password of at least 8 characters</span>
<span ng-show="userForm.password.$dirty && userForm.password.$error.maxLength" class="text-danger">The charactar limit for passwords is 24</span>
</div>
<div class="text-center form-group mt">
<button type="submit" class="btn btn-large btn-primary">Sign up</button> or
Sign in
</div>
<div data-ng-show="error" class="text-center text-danger">
<strong data-ng-bind="error"></strong>
</div>
</fieldset>
</form>
</div>
any thoughts on what's gone wrong here?
It was just a syntax error: userForm.password.$error.minLength should have been userForm.password.$error.minlength (capitalization).
You should change && to && inside ng-show expression, you must have getting an error in console.
The updated ng-show version will look something like below.
ng-show="userForm.password.$dirty && userForm.password.$error.required"
The other more convenient way is to use ng-messages directive, to show and hide validation messages based on form & its field validity

ng-pattern not working for form validation

I have tried to use a lot of regex which I found on the internet but with no luck. I am trying to validate if a form's input ranges between 0-100 (both 0 & 100 are valid inputs) but for some reason The error is not showing up. Pasting my code below
<form class="row" name="myForm">
<div ng-repeat="month in plan.months" class="form-group">
<div class="col-sm-2">{{month.label}} : </div>
<div class="col-sm-10">
<input type="text"
name="name"
ng-model="month.value"
class="form-control"
ng-pattern="/^([1-9]?[0-9])$/"
/>
<br />
</div>
<span class="error" style="color:red" ng-show="myForm.name.$error.pattern">Please enter a Percentage value between 1 & 100</span>
</div>
</form>
try this,
<form class="row" name="myForm">
<div ng-repeat="month in plan.months" class="form-group">
<div class="col-sm-2">{{month.label}} : </div>
<div class="col-sm-10">
<input type="text"
name="name"
ng-model="month.value"
class="form-control"
ng-pattern="/^([0-9]|[1-9][0-9]|[1-9][0-9][0])$/"
/>
<br />
</div>
<span class="error" style="color:red" ng-show="myForm.name.$error.pattern">Please enter a Percentage value between 1 & 100</span>
</div>
</form>
Also refer this
Is there a reason you're using a text input rather than a number input?
If not, try this:
https://jsfiddle.net/kqupg84y/
<form class="row" name="myForm">
<div class="col-sm-2">{{month.label}} : </div>
<div class="col-sm-10">
<input type="number"
name="name"
ng-model="month.value"
class="form-control"
min="0"
max="100"
/>
<br />
</div>
<span class="error" style="color:red" ng-show="myForm.name.$error.pattern">Please enter a Percentage value between 1 & 100</span>
{{myForm.$error}}
(i removed ng-repeat for simplicity of fiddle)
That doesn't answer your question about using an ng-pattern though.
That being said, your regex may just be a bit off. rather than
/^([1-9]?[0-9])$/
you could try:
/^[0-9]+$/
if you're trying to match any number between 0 and 100.
Your regex looks like it's trying to match any number that is between 1 and 9, potentially followed by any other number... but if you're trying to make it inclusive of 0 and 100, i'm not sure it works as expected.
The tool I generally use for checking my regular expressions is:
http://regexr.com/
Your problem is that multiple inputs in your form have the same name. You need to add some uniqueness to the input names. A quick and dirty way to make form element names unique is to bind the name property to an expression that uses the $index of the ng-repeat like name="month{{$index}}. Then you can use Javascript's bracket notation to access the correct form element from the form controller:
<div ng-repeat="month in plan.months" class="form-group">
<div class="col-sm-2">{{month.label}} : </div>
<div class="col-sm-10">
<input type="text"
name="month{{$index}}"
ng-model="month.value"
class="form-control"
ng-pattern="/^[1-9]?[0-9]$|^100$/"
/>
<br />
</div>
<span class="error" style="color:red"
ng-show="myForm['month' + {{$index}}].$error.pattern">
Please enter a Percentage value between 1 & 100
</span>
</div>
Here's a plunker demonstrating this in action. As an aside, your pattern incorrectly failed the string "100", so I added an alternative to the regex.
It's because you cannot use a regular form with ng-repeat because of multiple inputs with the same name. Use ng-form inside ng-repeat to get isolated forms.
Also if you want numbers, just use input type=number with min and max values instead of using ng-pattern.
See working example https://jsfiddle.net/asimgeker/yjmoLtvv/
<div ng-app>
<div ng-controller="MyCtrl">
<div ng-repeat="month in months" class="form-group">
<ng-form name="myForm">
<div class="col-sm-2">{{month.label}} : </div>
<div class="col-sm-10">
<input type="number" min="0" max="100" name="myName" ng-model="month.value" class="form-control" />
<br />
</div>
<div style="color: red" ng-show="myForm.myName.$error.max">Should be less than 101</div>
<div style="color: red" ng-show="myForm.myName.$error.min">Should be greater than -1</div>
</ng-form>
</div>
</div>
</div>
#anurag -- the Solution you provided worked for numbers above 100 but was failing for below 0 numbers
& #andrew -- The same with your solution, was not throwing a validation error unless I enter -100 (ng-maxlength = 3) is working but that is not how we need it.
The original issue was with my Regex, finally the code that worked for me is
<form class="row" name="myForm">
<div class="col-sm-2">{{month.label}} : </div>
<div class="col-sm-10">
<input type="number"
name="percent_monthly_targets"
ng-model="month.value"
class="form-control"
ng-pattern="/^[0-9][0-9]?$|^100$/"
/>
<br />
<span class="alert alert-danger" ng-show="myForm.percent_monthly_targets.$error.pattern">Please enter a Percentage value between 1 & 100</span>
</div>
</form>

Resources