user login validation

angularjs user login validation

by william jiang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
<body ng-app="myApp" ng-controller="Ctrl">
    <div class="container">
         <h2 class="text-danger bg-primary" style="padding: 10px;">User Login Validation Form</h2>

        <form role="form" name="form" novalidate ng-submit="loginValidate()">
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" ng-model="user.email" required class="form-control"> <span ng-show="form.email.$dirty && form.email.$error.required">Required</span>
 <span ng-show="form.email.$dirty && form.email.$error.email">Not a valid email</span>

            </div>
            <div class="form-group">
                <label for="password">Password:</label>
                <input type="password" id="password" name="password" ng-model="user.password" required class="form-control" ng-minlength="5" ng-maxlength="10"> <span ng-show="form.password.$dirty && form.password.$error.required">Required</span>
 <span ng-show="form.password.$dirty && form.password.$error.minlength">Minlength is 5</span>
 <span ng-show="form.password.$dirty && form.password.$error.maxlength">Maxlength is 10</span>

            </div>
            <button class="btn btn-default" ng-disabled="form.$invalid">Log On</button>
        </form>
    </div>
    <script>
        ;
        (function() {
            "use strict";
            angular.module("myApp", [])
                .controller('Ctrl', ["$scope", "$location", function($scope, $location) {
                $scope.loginValidate = function() {
                    if ($scope.form.$valid) {
                        console.log('cool, success, continue...');
                   ...

CSS

input .ng-invalid.ng-dirty {
            border: 1px solid red;
        }

JavaScript

// See HTML section for details.