I have html code and it checks phone number keyed in is whether valid or not.
I can't find how it check to validate the phone number.
The problem is it's validation doesn't allow + sign and start with 0.
How can I allow + sign and start with 0 at phone number validation.
My html code is as follow.
<div class="form-group has-feedback">
<div class="form-group" ng-class="{ 'has-error' : consumerRegisterForm.Office_no.$invalid && (consumerRegisterForm.Office_no.$dirty || submitted)}">
<div class="input-icon">
<i class="icon fa fa-phone-square"></i>
<input type="number" class="form-control" ng-model="RegisterData.Office_no" name="Office_no" placeholder="Office Phone Number" ng-required="true">
</div>
<p class="validation-error" ng-show="consumerRegisterForm.Office_no.$error.required && (consumerRegisterForm.Office_no.$dirty || submitted)" class="help-block">Please Enter office phone number.</p>
</div>
</div>
Your input is type="number". It means it only allows... numbers.
As you want to use + and leading zeros, you may want to change it to text:
<input type="text" .../>
Use input type "text" and make directive which will fulfill your requirements
Related
I'm trying to perform simple form validation. I'm using required and ng-minlength conditions on my fields and ng-messages to display the error messages. the error messages should display only when user access the input field. But I do not see any error messages appearing. When I examined using chrome developer tools, I found the classes on the input field are changing but the 'has-error' class is not being added on the other div elements that are checking for this condition.
this is when the application got loaded.
this is when I clicked the username field and left the field without giving any data. Please observe the classes of the elements marked in red boxes. I'm not getting any errors displayed. What might the issue be?
1 this is the ng-messages code snippet that i'm using
<form role="form" name="userForm" novalidate class="container-fluid">
<div class="margin-bottom" ng-class="{'has-error' : userExists.notAvailable , 'has-error': userForm.username.$touched && userForm.username.$invalid}">
<label for="email">username</label>
<input class="form-control" type="text" placeholder="UserName" name="username" ng-blur="checkingUser($event)" ng-model="username" required ng-minlength="4">
<div ng-messages='userExists'>
<div ng-message='error'>Error!</div>
<div class="form-group" ng-message='notAvailable' class="has-error">Username already exists. Please choose a different username!!</div>
</div>
<div class="help-block" ng-messages="userForm.username.$error" ng-show="userForm.username.$touched" ng-class="{'has-error': userForm.username.$touched && userForm.username.$invalid}">
<div class="form-group" ng-message='required' class="has-error">Username cannot be empty</div>
<div class="form-group" ng-message='minlength'>minimum 4 charcters</div>
</div>
</div>
Edited after the source code is posted:
<div class="margin-bottom" ng-class="{'has-error' : userExists.notAvailable , 'has-error': userForm.username.$touched && userForm.username.$invalid}">
<label for="email">username</label>
<input class="form-control" type="text" placeholder="UserName" name="username" ng-blur="checkingUser($event)" ng-model="username" ng-required="true" ng-minlength="4">
<div ng-messages='userExists'>
<div ng-message='error'>Error!</div>
<div class="form-group has-error" ng-message='notAvailable' >Username already exists. Please choose a different username!!</div>
</div>
<div ng-messages="userForm.username.$touched && userForm.username.$error" ng-class="{'has-error': userForm.username.$touched && userForm.username.$invalid}">
<div class="form-group has-error" ng-message='required'>Username cannot be empty</div>
<div class="form-group" ng-message='minlength'>minimum 4 charcters</div>
</div>
</div>
This works on my machine.
The message will be displayed after you've submitted the form.
Make sure you've added required dependency in your module to use ngMessage. If necessary, please post the AngularJS code as well.
I'm new to Angular and have trouble getting the ng-pattern to validate the email address based on a REGEX. In fact the other default angular validation for email also changes behaviour and only shows an error if the entire field is empty when I insert ng-pattern. Initially tried using directives and controllers but found that the ng-pattern can achieve (in theory) the same effect of validating the email so decided to use this.
I have used several REGEX patterns and read about ng-pattern such as from: Regex validation of ng-patternForm validationEasy form validation and many other links but nothing works. Can anybody figure-out what I need to do to make things work ?
<form name="userForm" novalidate>
<div class="row">
<div class="large-12 medium-12 small-12 columns">
<label>Username</label>
<input type="email" name="username" placeholder="johnsmith#ashburton.com" ng-model="user.username" ng-maxlength="100" ng-model-options="{ updateOn: blur }" ng-pattern = "/^(?("")("".+?(?<!\)""#)|(([0-9a-z]((\.(?!\.))|[-!#\$%&'*\+/=\?\^`\{\}\|~\w])*)(?<=[0-9a-z])#))(?([)([(\d{1,3}\.){3}\d{1,3}])|(([0-9a-z][-\w]*[0-9a-z]*\.)+[a-z0-9][\-a-z0-9]{0,22}[a-z0-9]))$/" required />
<div class="error-container" ng-show="userForm.username.$dirty && userForm.username.$invalid">
<small class="error" ng-show="userForm.username.$error.required">
Your email is required.
</small>
<small class="error" ng-show="userForm.username.$error.email">
Please input a valid email.
</small>
<small class="error" ng-show="userForm.firstname.$error.maxlength">
Your email cannot be longer than 100 characters
</small>
</div>
</div>
</form>
Please change your ng-pattern to match this regex:
ng-pattern = '/^(([^<>()\[\]\.,;:\s#\"]+(\.[^<>()\[\]\.,;:\s#\"]+)*)|(\".+\"))#(([^<>()[\]\.,;:\s#\"]+\.)+[^<>()[\]\.,;:\s#\"]{2,})$/i'
This regex will give error if the section after # is left blank. This regex will accept unicode also.
Hope it helps.
There is an error with you regular expression. I used this simple email validator and it worked fine with few changes to display proper errors
<div class="row">
<div class="large-12 medium-12 small-12 columns">
<label>Username</label>
<input type="email" name="username" placeholder="johnsmith#ashburton.com" ng-model="user.username" ng-maxlength="100" ng-model-options="{ updateOn: blur }" ng-pattern="/^[a-z]+[a-z0-9._]+#[a-z]+\.[a-z.]{2,5}$/" required />
<div class="error-container" ng-show="userForm.username.$dirty && userForm.username.$error">
<small class="error" ng-show="userForm.username.$error.required">
Your email is required.
</small>
<small class="error" ng-show="userForm.username.$error.pattern">
Please input a valid email.
</small>
<small class="error" ng-show="userForm.username.$error.maxlength">
Your email cannot be longer than 100 characters
</small>
</div>
</div>
</div>
The problem was in my regex. I ended up using: ng-pattern='/^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/' required />
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>
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$/.
AngularJS - I am using third party plugin ng-intl-tel-input. This is using for phone/mobile number showcase. All is well, populating placeholders(example phone number) based on country flag changes. Here I am facing problem that If entered value is incorrect based on country code & not valid number. Its returning null.. I wanna validate that & need to show user in valid number & need that updated number..How an I get?
<input class="form-control" type="text" ng-model="mobile" ng-intl-tel-input>
You can check demo from below URL
http://hodgepodgers.github.io/ng-intl-tel-input/
and html source code from below URL
https://github.com/hodgepodgers/ng-intl-tel-input/blob/master/index.html
Try by changing below code for input.
<form name="form">
<div class="form-group" ng-class="{'has-error': form.mobile.$invalid && form.mobile.$touched, 'has-success': form.mobile.$valid}">
<input type="text" class="form-control" id="mobile" name="mobile" ng-model="mobile" ng-intl-tel-input>
<span class="help-block" ng-show="form.mobile.$pristine && form.mobile.$untouched">Please type a telephone number</span>
<span class="help-block" ng-show="form.mobile.$invalid && form.mobile.$touched">Invalid :(</span>
<span class="help-block" ng-show="form.mobile.$valid">Valid :) </span>
</div>
</form>