AngularJS form validation

by suraj mahajan

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.6/css/foundation.min.css">
<div ng-app="myApp" ng-controller="UserCtrl as user">
    <form name="userForm" ng-submit="registerUser()" novalidate>
        <div>
            <input type="text" ng-pattern="\^[a-zA-Z]+$\" ng-model="user.username" name="username" placeholder="Username" required="" ng-minlength="3" ng-maxlength="10"  />
            <span ng-show="userForm.username.$error.maxlength">username must be 10 character maximum</span>
            <span ng-show="userForm.username.$error.minlength">username must be 3 character minimum</span>
            <span ng-show="userForm.username.$error.pattern">username must be only letter and number</span>
            <span ng-show="userForm.username.$error.required && !userForm.username.$pristine">username is required</span>
        </div>
        <div>
            <input type="email" ng-model="user.email" name="email" placeholder="Email" required />    
            <span ng-show="userForm.email.$error.email">enter a valid email</span>
            <span ng-show="userForm.email.$error.required && !userForm.email.$pristine">email is required</span>
        </div>
        <div>
            <input type="url" ng-model="user.url" name="url" placeholder="Url" required />    
            <span ng-show="userForm.url.$error.url">enter a valid url</span>
        </div>
        <div>
            <button type="reset" ng-disabled="userForm.$pristine">Reset</button>  
            <button type="submit" ng-disabled="!userForm.$valid">Register</button>    
        </div>
        
    
    </form>
</div>

JavaScript

angular.module('myApp', [])

.controller('UserCtrl', function() {
    this.registerUser = function() {
       alert("Submitting...");
    }
});