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>
Related
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
I was looking at the W3school example of form validation for Angular JS, here is the code:
<form name="myForm">
<p>Name:
<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span>
</p>
<p>Adress:
<input name="myAddress" ng-model="myAddress" required>
<span ng-show="myForm.myAddress.$untouched">Please enter address.</span>
</p>
</form>
note the ng-show="myForm.myName.$touched", does Angular find the element's name attribute as default? What if the input has an id and I want to use that instead of name?
You can use this in below way..
<input name="myName" id="myNameId" ng-model="myName" required>
<span ng-show='angular.element($("#myNameId")).$touched && angular.element($("#myNameId")).$invalid'>The name is required.</span>
</p>
I enter the page and I can see the validation message immediately.
<div ng-class="{'has-error': test.$invalid}" class="form-group" >
<input id="field" name="field" required class="form-control" ng-model="field" type="text"/>
<div class="help-block error" ng-show="test.field.$error.required">Required</div>
</div>
link
How can avoid that ?
Your issue is essentially with respect to the fact that the condition for
ng-show is only test.field.$error.required.
What's the problem with this?
Even when the page loads, the field is still not a valid email id.
So, what's the fix?
You need to check that the user has actually clicked on the field and the field is no longer pristine.
How do we do that?
In the ng-show, add the following condition.
test.field.$error.required && test.field.$dirty
Here is a working DEMO
You also need to add a check to see if the input has been touched too.
<div ng-class="{'has-error': test.$invalid}" class="form-group" >
<input id="field" name="field" required class="form-control" ng-model="field" type="text"/>
<div class="help-block error" ng-show="test.field.$error.required && test.field.$touched">Required</div>
</div>
I'm trying to make a range validation between 2 numeric inputs. The inputs represent base remuneration and top remuneration. I tried to use ui-validate-watch like this: http://jsfiddle.net/GNJP4/3/. The problem is that basically lowerBound is not updated correctly (same with upperBound)
If you have an idea to make a work around or use directives (I tried but is a mess) would be much appreciated.
here i have two input field like password and confirmPassword. Now we want to do some validate like password match in both fields or not. here is the html and js code snipet.
var validationApp = angular.module('validationApp',['ngGrid','ui.utils']);
// you have to be put this line of code in your controller
$scope.formData = {
password: "",
cPassword: ""
};
<!-- password -->
<div class="form-group" ng-class="{ 'has-error' : userForm.password.$invalid && !userForm.password.$pristine }">
<label>Password</label>
<input type="password" name="password" class="form-control" ng-model="formData.password" ng-minlength="5" ng-maxlength="12" required>
<p ng-show="userForm.password.$invalid && !userForm.password.$pristine" class="help-block">Required and must be of length 7 to 12.</p>
</div>
<!-- confirm password -->
<div class="form-group" ng-class="{ 'has-error' : userForm.cPassword.$invalid && !userForm.cPassword.$pristine }">
<label>Confirm Password</label>
<input type="password" name="cPassword" class="form-control" ng-model="formData.cPassword" ui-validate=" '$value==formData.password'" ui-validate-watch=" 'formData.password'" ng-minlength="5" ng-maxlength="12" required>
<p ng-show="userForm.cPassword.$invalid && !userForm.cPassword.$pristine" class="help-block">Required. Password not match</p>
</div>
I am using angular validation on an html page, where I have defined a form along with validation on the form. However, when I run the page, all the validations I have used on the page is visible. Is there a way I can hide all the validations?
<form ng-controller="validateCtrl"
name="loginForm" novalidate>
<p>UserName:<br>
<input type="text" name="uName" ng-model="uName" required>
<span style="color:red" ng-show="loginForm.uName.$dirty && loginForm.uName.$invalid && loginForm.uName.$error.required">
Username is required
</span>
</p>
<p>Password:<br>
<input type="text" name="pwd" ng-model="pwd" required>
<span style="color:red" ng-show="loginForm.pwd.$dirty && loginForm.pwd.$invalid">
<span ng-show="loginForm.pwd.$error.required">Password is required.</span>
</span>
</p>
<p>
<input type="submit" ng-click="popupuser()"
ng-disabled="loginForm.$invalid ">
</p>
</form>
<script src="https://code.angularjs.org/1.2.3/angular.min.js"></script>
Your code for form is fine please see here http://jsbin.com/figuve/1/edit
Make sure that your validateCtrl exist otherwise validation will not work plase see here
http://jsbin.com/figuve/2/edit
or
remove ng-controller="validateCtrl" from your form if you don't need it.
please see here http://jsbin.com/figuve/3/edit
You can try use variable to check is form submited, like that
<span ng-show="(loginForm.uName.$dirty || isSubmitted) && loginForm.uName.$error.required">Username is required</span>