Angular Form Validation
<div ng-app='meetUp' ng-controller='mainController'>
<div class="container">
<div class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign Up</div>
</div>
<div class="panel-body">
<form name="signup" ng-submit="createUser()" novalidate>
<div class="form-group">
<label>First Name</label>
<input class="form-control" ng-model="newUser.firstName" name="firstName" type="text" placeholder="Provide your FirstName" hi-validate="required">
<hi-validator-message data-model="firstName"></hi-validator-message>
</div>
<div class="form-group">
<label>Last Name</label>
<input class="form-control" ng-model="newUser.lastName" type="text" name="lastName" placeholder="Provide your Last Name">
</div>
<div class="form-group">
<label>Email Address</label>
<input class="form-control" ng-model="newUser.email" type="email" name="email" hi-validate="required, email" placeholder="Provide your email eg. abc@gmail.com">
<hi-validator-message data-model="email"></hi-validator-message>
</div>
<div class="form-group">
<label>UserName</label>
<input class="form-control" type="text" ng-model="newUser.username" name="username" hi-validate="required" placeholder="Provide a name by which you want to be known on our site">
<hi-validator-message data-model="username"></hi-validator-message>
</div>
<div class="form-group">
<label>Password</label>
<input class="form-control" type="password" ng-model="newUser.password" name="password" hi-validate="password" placeholder="Provide password for your account">
<hi-validator-message data-model="password"></hi-validator-message>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input class="form-control" type="password" ng-model="newUser.confirmPassword" hi-validate="confirmPassword" name="confirmPassword" placeholder="Re-enter Password as specified above">
<hi-validator-message data-model="confirmPassword"></hi-validator-message>
</div>
<button type="submit" class="btn btn-default" ng-disabled="signup.$invalid">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
var app = angular.module('meetUp', ['hiComponents.validator']);
app.controller('mainController', ['$scope', 'hiValidatorService',
function($scope, hiValidator){
$scope.newUser = {};
$scope.createUser = function() {
alert("Created User Successfully");
$scope.newUser = {};
$scope.signup.$setPristine();
}
var verifyPassword = function(password) {
var passRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
if(!passRegex.test(password)) {
return {isValid: false, errorMessage: "Password must have minimum 8 chracters with atleast 1 alphabet & 1 numeric"};
}
return {isValid: true};
};
var verifyConfirmPassword = function(confirmPassword) {
if(confirmPassword === this.password) {
return {isValid: true};
}
return {isValid: false, errorMessage: "Confirm password must be equal to password provided above"};
};
var required = function(value) {
if(!value || value.length === 0){
return {isValid: false, errorMessage: "This field can't be left blank"};
}
return {isValid: true};
};
var validateEmail = function validateEmail(email) {
var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
if (re.test(email)) {
return {isValid: true};
}
return {isValid: false, errorMessage: 'Invalid Email'};
};
hiValidator.register(required, 'required', null, false);
hiValidator.register(verifyConfirmPassword, 'confirmPassword', $scope.newUser, false);
hiValidator.register(verifyPassword, 'password', null, false);
hiValidator.register(validateEmail, 'email', null, false);
}]);
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="https://raw.githack.com/marshal003/angular-validator/master/dist/angular-validator.min.js"></script>
body {
margin: 20px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />