<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@2.0.3" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="angular.js@1.2.5" data-semver="1.2.5" src="http://code.angularjs.org/1.2.5/angular.js"></script>
    <script data-require="angular-route@1.2.5" data-semver="1.2.5" src="http://code.angularjs.org/1.2.5/angular-route.js"></script>
    <script data-require="angular-ui-router@0.0.1" data-semver="0.0.1" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.0.1/angular-ui-router.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="Accounts">
    <h1>Url server form validation</h1>
    <form name="urlForm" ng-controller="Client">
      <div class="form-group">
        <label>url</label>
        <input type="url" name="linkedin" ng-model="data.linkedin" />
        <span ng-show="urlForm.linkedin.$invalid">{{urlForm.linkedin.errorMessage}}</span>
      </div>
      <button ng-click="save(data, urlForm)">Save</button>
    </form>
  </body>

</html>

// Code goes here

angular.module('Accounts', [
    'ngRoute',
    'ui.router'
])

.config(function ($routeProvider) {
    $routeProvider.otherwise('/404');

})

.controller('Client', ['$scope', function ($scope) {
    $scope.loading = false;

    $scope.init = function () {
         $scope.data = {
           linkedin: "http://dk.linkedin.com/in/mlunoe/"
         };
    };
    
    $scope.save = function (data, form) {
            console.log(form);
            form.linkedin.$setValidity("url", false);
            
            form.linkedin.errorMessage = "Server error message";
    }

    $scope.init();
}]);
/* Styles go here */

.ng-invalid {
    border: 1px solid #FA787E;
}