Signup form validation

User signup form validation with password match

by masudcsesust04

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<h3>New User</h3>                    
<div class="row-fluid" data-ng-controller="NewUserCtrl">
    <form name="userForm" class="form-horizontal" data-ng-submit="submit()" autocomplete='on'>    
        <div class="control-group">
            <label class="control-label">Login</label>
            <div class="controls">
                <input type="text" name="login" data-ng-model="user.login" required />
            </div>    
        </div>
        <div class="control-group">
            <label class="control-label">Email</label>
            <div class="controls">
                <input type="email" name="email" data-ng-model="user.mail" required />
                <span class="error" data-ng-show="userForm.email.$error.email">Invalid email</span>
            </div>
        </div>
        <div class="control-group">            
            <label class="control-label">First name</label>
            <div class="controls">
                <input type="text" name="firstname" data-ng-model="user.firstname" required />
            </div>
        </div>
        <div class="control-group">            
            <label class="control-label">Last name</label>
            <div class="controls">
                <input type="text" name="lastname" data-ng-model="user.lastname" required />
            </div>
        </div>
        <div class="control-group">            
            <label class="control-label">Password</label>
            <div class="controls">
                <input type="password" name="password" id="password" data-ng-model="user.password" size="25" required />
                <span class='help-inline' ng-show='userForm.password.$valid'>
          <i class='icon-ok'></i>
        </span>
            </div>
        </div>
        <div class="control-group">            
            <label...

CSS

.error{color:red;}

JavaScript

'use strict';

var app = angular.module('formApp', []);

app.controller('NewUserCtrl', function($scope){
  $scope.list = [];
  $scope.submit = function() {
    if (this.text) {
      this.list.push();      
    }
  };
});

app.directive("passwordVerify", function() {
    return {
        require: "ngModel",
        scope: {
            passwordVerify: '='
        },
        link: function(scope, element, attrs, ctrl) {
            scope.$watch(function() {
                var combined;
                
                if (scope.passwordVerify || ctrl.$viewValue) {
                   combined = scope.passwordVerify + '_' + ctrl.$viewValue; 
                }                    
                return combined;
            }, function(value) {
                if (value) {
                    ctrl.$parsers.unshift(function(viewValue) {
                        var origin = scope.passwordVerify;
                        if (origin !== viewValue) {
                            ctrl.$setValidity("passwordVerify", false);
                            return undefined;
                        } else {
                            ctrl.$setValidity("passwordVerify", true);
                            return viewValue;
                        }
                    });
                }
            });
        }
    };
});