Angular: Empty Fiddle
http://angularjs.org/
by vinodlouis
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
<div ng-show="isPositionInvalid">Incorrect position</div>
<div ng-show="isEmailInvalid">Incorrect Email</div>
<div ng-show="isPhoneInvalid">Incorrect phoneNumber</div>
<div>
Your Position(required)
<input type="text" ng-model="request.position" />
</div>
<div>
Your Email (required)
<input type="text" ng-model="request.email" />
</div>
<div>
Your phone (required)
<input type="text" size="5" ng-model="request.phone1" maxlength="3" />
<input type="text" size="5" ng-model="request.phone2" maxlength="3" />
<input type="text" size="6" ng-model="request.phone3" maxlength="4" />
</div>
<input type="button" value="ok" ng-click="login()" />
</div>
JavaScript
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.request = {
position:"",
email:"",
phone1:"",
phone2:"",
phone3:""
};
$scope.login = function(){
$scope.isPositionInvalid = $scope.isEmailInvalid = $scope.isPhoneInvalid = false;
if($scope.request.position.length == 0){
$scope.isPositionInvalid = true;
return;
}
//you can use myDataService.validateEmail to check email validation it exists in your service
if($scope.request.email.length == 0 || !(/^(([^<>()[\]\\.,;:\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,}))$/.test($scope.request.email))){
$scope.isEmailInvalid = true;
return;
}
if(isNaN($scope.request.phone1) || isNaN($scope.request.phone2) || isNaN($scope.request.phone3)|| $scope.request.phone1.length != 3 || $scope.request.phone2.length != 3 || $scope.request.phone3.length != 4 || $scope.request.phone1 < 0 || $scope.request.phone2 < 0 || $scope.request.phone3 < 0){
$scope.isPhoneInvalid = true;
return;
}
alert("successfull validation");
}
}