am trying to do angular form validation while doing am facing below problems getting difficulty to clear
1) when i click submit without filling inputs getting validation messages which is not in red color and am not getting validation message itself for phone number field
2)when i type something like in name text box i typed my name and remove all the characters then text box gets red but no validation message like name is required
3) In email filed while started to type itself its showing message please enter valid mail id
4) in phone number field if i enter character its giving right validation message but if i keep on pressing more than 10 characters its giving please enter 10 digit i need to avoid this
This is my fiddle https://jsfiddle.net/cL2q3z6v/
HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<div class="container">
<!-- PAGE HEADER -->
<div class="page-header"></div>
<!-- =================================================================== -->
<!-- FORM ============================================================== -->
<!-- =================================================================== -->
<!-- pass in the variable if our form is valid or invalid -->
<form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate="" id="userForm">
<!-- NAME -->
<div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
<label>Name*</label>
<input type="text" name="name" class="form-control" ng-model="user.name" required="" />
<p ng-show="userForm.name.$invalid && userForm.$submitted" class="help-block">Name is required.</p>
</div>
<!-- USERNAME -->
<div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">
<label>Username</label>
<input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8" required="" />
<p ng-show="userForm.username.$error.required && userForm.$submitted" class="help-block">Username is required.</p>
<p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
<p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
</div>
<!-- EMAIL -->
<div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="user.email" required="" />
<p ng-show="userForm.email.$invalid && userForm.$submitted" class="help-block">Enter a valid email.</p>
</div>
<!-- PHONE -->
<div class="form-group" ng-class="{ 'has-error' : userForm.phone.$invalid && !userForm.phone.$pristine }">
<label>Phone Number</label>
<input type="text" name="phone" class="form-control" ng-model="user.phone" ng-pattern="phoneNumbr" ng-maxlength="10" placeholder="+91-636-78658" />
<p ng-show="userForm.phone.$error.required && userForm.$submitted" class="help-block">Phone number is Required</p>
<p ng-show="userForm.phone.$error.maxlength" class="help-block">Ten digit Required</p>
<p ng-show="userForm.phone.$error.pattern" class="help-block">Please enter digits like 9964289813</p>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Gender</label>
<div class="col-lg-5">
<div class="radio">
<label><input type="radio" name="gender" value="male" ng-model="user.gender" ng-required="!user.gender"/> Male</label>
</div>
<div class="radio">
<label><input type="radio" name="gender" value=
"female" ng-model="user.gender" ng-required="!user.gender"/> Female</label>
</div>
<div class="radio">
<label><input type="radio" name="gender" value=
"other" ng-model="user.gender" ng-required="!user.gender"/> Other</label>
</div>
<p ng-show="userForm.gender.$error.required && userForm.$submitted" class="help-block">Gender is Required</p>
</div>
</div>
<div class="form-group">
<label class="col-lg-5 control-label">Country</label>
<div class="col-lg-5">
<select name="country" class="form-control" required="" ng-model="user.country">
<option value="">Select a country</option>
<option value="AU">Australia</option>
<option value="CA">Canada</option>
<option value="FR">France</option>
</select>
<p ng-show="userForm.country.$error.required && userForm.$submitted" class="help-block">country is Required</p>
</div>
</div>
<div class="form-group">
<label class="col-lg-5 control-label">Browser</label>
<div class="col-lg-5">
<div class="checkbox">
<label>
<input type="checkbox" name="browsers" value="chrome" ng-model="user.browser['chrome']" ng-required="!browser(user.browser)"/> Google Chrome</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="browsers" value="firefox" ng-model="user.browser['firefox']" ng-required="!browser(user.browser)"/> Firefox</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="browsers" value="ie" ng-model="user.browser['ie']" ng-required="!browser(user.browser)"/> IE</label>
</div>
<p ng-show="userForm.browsers.$error.required && userForm.$submitted" class="help-block">Browser is Required</p>
</div>
</div><br />
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
Script
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.phoneNumbr = /^\+?\d{2}[- ]?\d{3}[- ]?\d{5}$/;
$scope.browser = function (object) {
return Object.keys(object).some(function (key) {
return object[key];
});
}
$scope.user = {};
$scope.user.browser = {};
// function to submit the form after all validation has occurred
$scope.submitForm = function(isValid) {
// check to make sure the form is completely valid
if (isValid) {
alert('our form is amazing');
}
};
});
