AngularJS Form Validation - Disable Submit / Confirm Password Custom Directive
Creates a "UserValidation" module with validation directive to make sure passwords match.
http://thomporter.com
by gangadharjannu
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<div ng-app="myapp">
<form name="addUserForm" novalidate>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="email">Email:</label>
<input class="form-control" type="email" id="email" name="email" ng-model="addUserFormData.email" ng-pattern="^\S+@(([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6})$"
required placeholder="[email protected]">
<span class="error_text" ng-show="addUserForm.email.$error.required && addUserForm.email.$touched">Required</span>
<span class="error_text" ng-show="!addUserForm.email.$error.required && addUserForm.email.$error.email && addUserForm.email.$dirty">Invalid Email</span>
</div>
<div class="form-group">
<label for="username">Customer Name:</label>
<input class="form-control" type="text" id="username" name="username" ng-model="addUserFormData.username" ng-pattern="/^[\w -]*$/"
ng-minlength="2" ng-maxlength="20" maxlength="20" required placeholder="Customer Name">
<span class="error_text" ng-show="addUserForm.username.$error.required && addUserForm.username.$touched">required</span>
<span class="error_text" ng-show="!addUserForm.username.$error.minLength && !addUserForm.username.$error.maxLength && addUserForm.username.$error.pattern && addUserForm.username.$dirty">Name must contain letters and space only.</span>
<span class="error_text" ng-show="!addUserForm.username.$error.required && (addUserForm.username.$error.minlength || addUserForm.username.$error.maxlength) && addUserForm.username.$dirty">Name must be between 2 and 20 characters.</span>
</div>
<div class="form-group">
<label>Role:</label><br />
<label class="radio-inline"><input type="radio" name="role" ng-model="addUserFormData.roleAdmin"...
JavaScript
var app = angular.module('myapp', []);