<html>

<head>
    <title>Client/Server Validation Integration Demo</title>
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-loader.min.js"></script>
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.min.js"></script>
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-cookies.min.js"></script>
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-touch.min.js"></script>
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-resource.min.js"></script>
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.min.js"></script>
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui-ieshiv.min.js"></script>
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="style.css">

    <script type='text/javascript' src="script.js"></script>
    <script type='text/javascript' src="https://rawgit.com/long2know/angular-demos-general/master/client-server-validation/serverError.js"></script>
    <script type='text/javascript' src="https://rawgit.com/long2know/angular-demos-general/master/client-server-validation/validationService.js"></script>
</head>

<body ng-app="myApp">
    <div ng-include="'menu.html'"></div>
    <div ui-view="main" class="container"></div>

    <script type="text/ng-template" id="menu.html">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <span class="navbar-brand">Client/Server Validation Integration Demo</span>
                </div>
            </div>
        </nav>
    </script>

    <script type="text/ng-template" id="state1.html">
        <form class="form" name="vm.form" role="form" novalidate>
            <div class="form-group">
                <div class="form-group" ng-class="{ 'has-error': vm.form.firstname.$invalid && vm.isSubmitted }">
                    <label for="firstname">First Name</label>
                    <div class="form-group" ng-class="{ 'has-error': vm.form.firstname.$invalid && vm.isSubmitted }">
                        <input id="firstname" name="firstname" type="text" class="input primary form-control form-control-inline" placeholder="First Name"
                        ng-model="vm.firstname" ng-required="true" autocomplete="off" server-error="true" />
                        <small id="firstnameReq" class="error" ng-show="vm.isSubmitted && vm.form.firstname.$error.required">This is a required field.</small>
                        <small class="error" ng-show="vm.isSubmitted && !vm.form.firstname.$error.required && vm.form.firstname.$error.server">
                            {{vm.form.firstname.$error.serverMessage}}
                        </small>
                    </div>
                </div>
                <div class="form-group" ng-class="{ 'has-error': vm.form.lastname.$invalid && vm.isSubmitted }">
                    <label for="lastname">Last Name</label>
                    <div class="form-group" ng-class="{ 'has-error': vm.form.lastname.$invalid && vm.isSubmitted }">
                        <input id="lastname" name="lastname" type="text" class="input primary form-control form-control-inline" placeholder="Last Name"
                        ng-model="vm.lastname" ng-required="true" autocomplete="off" server-error="true" />
                        <small id="lastnameReq" class="error" ng-show="vm.isSubmitted && vm.form.lastname.$error.required">This is a required field.</small>
                        <small class="error" ng-show="vm.isSubmitted && !vm.form.lastname.$error.required && vm.form.lastname.$error.server">
                            {{vm.form.lastname.$error.serverMessage}}
                        </small>
                    </div>
                </div>
                <div class="form-group" ng-class="{ 'has-error': vm.form.email.$invalid && vm.isSubmitted }">
                    <label for="email">Email</label>
                    <div class="form-group" ng-class="{ 'has-error': vm.form.email.$invalid && vm.isSubmitted }">
                        <input id="email" name="email" type="text" class="input primary form-control form-control-inline" placeholder="Email"
                        ng-model="vm.email" ng-required="true" autocomplete="off" server-error="true" />
                        <small id="emailReq" class="error" ng-show="vm.isSubmitted && vm.form.email.$error.required">This is a required field.</small>
                        <small class="error" ng-show="vm.isSubmitted && !vm.form.email.$error.required && vm.form.email.$error.server">
                            {{vm.form.email.$error.serverMessage}}
                        </small>
                    </div>
                </div>
            </div>
          <br/>
            <div class="form-group buttons">
                <button id="clear" type="button" class="btn btn-default" ng-click="vm.discard()">Clear</button>
                <button id="save" type="button" class="btn btn-primary pull-right" ng-click="vm.submit()" ng-disabled="!vm.form.$dirty">Submit</button>
            </div>
        </form>
    </script>
</body>

</html>
small {
    font-size: 0.625em;
    font-style: italic;
    color: #a94442;
    display: block;
    float:right;
}

input {
    display:block !important;
}

label {
    display:block;
}

.container {
    width: auto !important;
}

.form-inline .form-group {
    display:inline-block;
    width: auto;
}

form {
    width: 250px;
}

input {
    width: 250px !important;
}
(function () {
    angular.module('myApp.controllers', []);

    var myApp = angular.module('myApp', [
        'myApp.controllers',
        'long2know',
        'ngSanitize',
        'ui.bootstrap',
        'ui.router',
        'ui']);

    var state1Ctrl = function ($http, $filter, $timeout, $scope, $log, validationService) {
        var vm = this;

        vm.disabled = function (date, mode) {
            return (mode === 'day' && false); // (date.getDay() === 0 || date.getDay() === 6));
        };

        var init = function () {
            vm.firstname = '';
            vm.lastname = '';
            vm.email = '';
        };

        $scope.$watch('form', function () {
            vm.form.$setPristine();
            vm.form.$setUntouched();
            vm.isSubmitted = false;
        });

        vm.submit = function () {
            vm.isSubmitted = true;
            if (vm.form.$valid) {
                $http.post('https://long2know.azurewebsites.net/api/user')
                    .success(function (data, status, headers, config) {
                        $log.log("Success.");
                    })
                    .catch(function (error) {
                        // Note we use catch instead of error to make response same as $resource
                        $log.log("Error - calling validaiton server.");
                        if (validationService.isValidationError(error)) {
                            validationService.processServerErrors(vm.form, error.data);
                        }
                    });
            }
        }

        vm.discard = function () {
            init();
            vm.form.$setPristine();
            vm.form.$setUntouched();
            validationService.clearServerErrors();
            vm.isSubmitted = false;
        }

        init();
    };

    state1Ctrl.$inject = ['$http', '$filter', '$timeout', '$scope', '$log', 'validationService'];
    angular.module('myApp.controllers')
        .controller('state1Ctrl', state1Ctrl);

    myApp.config(['$locationProvider', '$stateProvider', '$urlRouterProvider',

        function ($locationProvider, $stateProvider, $urlRouterProvider) {

            $locationProvider.html5Mode(false);

            $urlRouterProvider.when('/', '/state1')
                .otherwise("/state1");

            $stateProvider.state('app', {
                abstract: true,
                url: '/',
                views: {
                    'main': {
                        template: '<div ui-view>/div>'
                    }
                }
            })
                .state('app.state1', {
                    url: 'state1',
                    templateUrl: 'state1.html',
                    controller: 'state1Ctrl',
                    controllerAs: 'vm',
                    reloadOnSearch: false
                })
        }]);

    myApp.run(['$log', function ($log) {
        $log.log("Start.");
    }]);
})()

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.