<!DOCTYPE html>
<html ng-app="appUser">
<head>
<title>User Management</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<style>
.error-true {
color: red;
}
</style>
</head>
<body>
<div id="content" ng-controller="myControl">
<legend> Sign Up:</legend>
<form name="myForm" class="form-horizontal" ng-submit="signUp()" novalidate>
<div class="alert alert-error" ng-show="validation.msg!=null && validation.msg!=''" ng-bind-html-unsafe=validation.msg></div>
<div class="control-group">
<label class="control-label error-{{validation.name}}" for="inputFirstName">Name</label>
<div class="controls">
<input type="text" name="inputFirstName" ng-model="user.first" class="input-small" placeholder="First Name" ng-Minlength="2" required >
<input type="text" name="inputLastName" ng-model="user.last" class="input-small" maxlength="50" placeholder="Last Name" ng-Minlength="2" required>
</div>
</div>
<div class="control-group">
<label class="control-label error-{{validation.email}}" for="inputEmail">Email</label>
<div class="controls">
<input type="email" name="inputEmail" ng-model="user.email" placeholder="Email" maxlength="50" required>
</div>
</div>
<div class="control-group">
<label class="control-label error-{{validation.password}}" for="inputPassword">Password</label>
<div class="controls">
<input type="password" name="inputPassword" ng-model="user.password" placeholder="Password (6 or more characters)" maxlength="20" ng-Minlength="6" required>
<span class="error" ng-show="myForm.inputPassword.$error.minlength"> Too short!</span>
</div>
</div>
<div class="control-group">
<label class="control-label error-{{validation.passwordVerify}}" for="inputPasswordVerify">Re-enter Password</label>
<div class="controls">
<input type="password" name="inputPasswordVerify" ng-model="user.passwordVerify" maxlength="20" placeholder="Re-enter password" ng-Minlength="6" required>
</div>
</div>
<div class="control-group">
<div class="controls">
<input class="btn-primary" type="submit" value="Sign Up">
</div>
</div>
</form>
</div>
</body>
<script src="js/angular.min.js"></script>
<script>
appUser = angular.module("appUser",[]);
appUser.controller('myControl', function($scope){
$scope.user={}
$scope.signUp = function(){
var user = $scope.user
$scope.validation={};
$scope.validation.msg="";
console.log(user)
console.log($scope.myForm)
if($scope.myForm.$invalid){
if ($scope.myForm.inputFirstName.$invalid || $scope.myForm.inputLastName.$invalid){
$scope.validation.name=true;
$scope.validation.msg += "- You need to provide a valid name<BR/>"
}
if ($scope.myForm.inputEmail.$invalid){
$scope.validation.email=true;
$scope.validation.msg += "- You need to provide a valid email<BR/>"
}
if ($scope.myForm.inputPassword.$invalid){
$scope.validation.password=true;
$scope.validation.msg += "- You need to provide a valid password<BR/>"
}
if ($scope.myForm.inputPasswordVerify.$invalid){
$scope.validation.passwordVerify=true;
$scope.validation.msg += "- You need to fill the field \"re-enter password\"<BR/>"
}
return
}
if (user.password != user.passwordVerify){
$scope.validation.password=true;
$scope.validation.passwordVerify=true;
$scope.validation.msg += "- The passwords don't match<BR/>"
return
}
if($scope.myForm.$valid){
alert("Ok");
}
}
});
</script>
</html>
No comments:
Post a Comment