oharsta/AngularNonLatin1

## AngularNonLatin1
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Form latin-1 input validation</title>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
  <script type="text/javascript">
    (function(angular) {
      'use strict';
    var app = angular.module('form-validation', []);

    angular.module('form-validation').factory('InvalidCharactersValidator', function() {
      return {
        invalidChars: function(value) {
          var regExp = (/[^\u0000-\u00FF]+/g);
          var match = regExp.exec(value);
          var result = [];
          while (match != null) {
            result.push(match[0]);
            match = regExp.exec(value);
          }
          return result.join(' ');
        }
      }
    });

    app.directive('latinValidator', function(InvalidCharactersValidator) {
      return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {
          ctrl.$validators.latinValidator = function(modelValue, viewValue) {
            var value = modelValue || viewValue;
            var target = scope.$eval(attrs.latinValidator);
            if (value === undefined) {
              target.detail = undefined;
              return false;
            }
            var result = InvalidCharactersValidator.invalidChars(value);
            if (result !== '') {
              // it is invalid
              target.detail = 'Invalid characters: ' + result;
              return false;
            }
            // it is valid
            return true;
          };
        }
      };
    });

    app.directive('latinValidatorAsync', function($q, $timeout, InvalidCharactersValidator) {
      return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {
          ctrl.$asyncValidators.latinValidatorAsync = function(modelValue, viewValue) {
            var value = modelValue || viewValue;
            var def = $q.defer();
            //mock async result from web server, normally you don't need $q and $timeout
             $timeout(function() {

               var result = InvalidCharactersValidator.invalidChars(value);
               if (result !== '') {
                // it is invalid
                var target = scope.$eval(attrs.latinValidatorAsync);
                target.detail = 'Invalid characters: ' + result;
                def.reject();
               } else {
                 def.resolve();
               }
              }, 1000);

              return def.promise;

          };
        }
      };
    });

    })(window.angular);
  </script>


</head>
<body ng-app="form-validation">
  <form name="form" class="css-form">
  <p>Invalid chars to copy: Ṁş,ĝűĂ</p>

  <div>
    input sync:
    <input type="text" ng-model="name" name="name" latin-validator="form.name" size="60" required/>{{name}}<p/>
    <span ng-show="form.name.$error.latinValidator">Error message without dynamics</span><p/>
    <span ng-show="form.name.$error.latinValidator && form.name.detail">{{form.name.detail}}</span>
  </div>

  <div>
    input async:
    <input type="text" ng-model="name2" name="name2" latin-validator-async="form.name2" size="60"
          ng-model-options="{updateOn: 'blur'}" required/>{{name2}}<p/>
    <span ng-show="form.name2.$pending.latinValidatorAsync">Checking for invalid characters...</span><p/>
    <span ng-show="form.name2.$error.latinValidatorAsync && form.name2.detail">{{form.name2.detail}}</span>
  </div>

  <button ng-disabled="form.$invalid">Next</button>

</form>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Form latin-1 input validation</title>

	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
	<script type="text/javascript">
	(function(angular) {
	'use strict';
	var app = angular.module('form-validation', []);

	angular.module('form-validation').factory('InvalidCharactersValidator', function() {
	return {
	invalidChars: function(value) {
	var regExp = (/[^\u0000-\u00FF]+/g);
	var match = regExp.exec(value);
	var result = [];
	while (match != null) {
	result.push(match[0]);
	match = regExp.exec(value);
	}
	return result.join(' ');
	}
	}
	});

	app.directive('latinValidator', function(InvalidCharactersValidator) {
	return {
	require: 'ngModel',
	link: function(scope, elm, attrs, ctrl) {
	ctrl.$validators.latinValidator = function(modelValue, viewValue) {
	var value = modelValue \|\| viewValue;
	var target = scope.$eval(attrs.latinValidator);
	if (value === undefined) {
	target.detail = undefined;
	return false;
	}
	var result = InvalidCharactersValidator.invalidChars(value);
	if (result !== '') {
	// it is invalid
	target.detail = 'Invalid characters: ' + result;
	return false;
	}
	// it is valid
	return true;
	};
	}
	};
	});

	app.directive('latinValidatorAsync', function($q, $timeout, InvalidCharactersValidator) {
	return {
	require: 'ngModel',
	link: function(scope, elm, attrs, ctrl) {
	ctrl.$asyncValidators.latinValidatorAsync = function(modelValue, viewValue) {
	var value = modelValue \|\| viewValue;
	var def = $q.defer();
	//mock async result from web server, normally you don't need $q and $timeout
	$timeout(function() {

	var result = InvalidCharactersValidator.invalidChars(value);
	if (result !== '') {
	// it is invalid
	var target = scope.$eval(attrs.latinValidatorAsync);
	target.detail = 'Invalid characters: ' + result;
	def.reject();
	} else {
	def.resolve();
	}
	}, 1000);

	return def.promise;

	};
	}
	};
	});

	})(window.angular);
	</script>



	</head>
	<body ng-app="form-validation">
	<form name="form" class="css-form">
	<p>Invalid chars to copy: Ṁş,ĝűĂ</p>

	<div>
	input sync:
	<input type="text" ng-model="name" name="name" latin-validator="form.name" size="60" required/>{{name}}<p/>
	<span ng-show="form.name.$error.latinValidator">Error message without dynamics</span><p/>
	<span ng-show="form.name.$error.latinValidator && form.name.detail">{{form.name.detail}}</span>
	</div>

	<div>
	input async:
	<input type="text" ng-model="name2" name="name2" latin-validator-async="form.name2" size="60"
	ng-model-options="{updateOn: 'blur'}" required/>{{name2}}<p/>
	<span ng-show="form.name2.$pending.latinValidatorAsync">Checking for invalid characters...</span><p/>
	<span ng-show="form.name2.$error.latinValidatorAsync && form.name2.detail">{{form.name2.detail}}</span>
	</div>

	<button ng-disabled="form.$invalid">Next</button>

	</form>
	</body>
	</html>