jamie111111
3/10/2019 - 2:12 PM

Angular Form Validation

Angular Form Validation

Angular Form Validation

Angular Form Validation Using angular-form-validator module.

A Pen by vinit on CodePen.

License.


<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>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />