Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="validator.nif">
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="col-xs-12">
      <form name="nifForm">
        <div class="form-group">
          <input type="text" name="nif1" is-nif-old ng-model="nif1" required class="form-control"/>
          <p ng-if="nifForm.nif1.$error.required" class="label label-danger">Este campo es obligatorio</p>
          <p ng-if="nifForm.nif1.$error.isNif" class="label label-danger">Formato de dni incorrecto</p>
        </div>
        <div class="col-xs-12">
          <pre>{{nifForm.nif1|json}}</pre>
        </div>
​
        <div class="form-group">
          <input type="text" name="nif2" is-nif ng-model="nif2" required class="form-control"/>
          <div ng-messages="nifForm.nif2.$error" multiple>
            <div ng-messages-include="generic-messages"></div>
          </div>
        </div>
        <div class="col-xs-12">
          <pre>{{nifForm.nif2|json}}</pre>
        </div>
        
        <div class="form-group">
          <input type="text" name="nif3" is-nif ng-model="nif2" required class="form-control"/>
          <div ng-messages="nifForm.nif3.$error" multiple>
            <div ng-messages-include="generic-messages"></div>
          </div>
        </div>
        <div class="col-xs-12">
          <pre>{{nifForm.nif3|json}}</pre>
        </div>
      </form>
    </div>
  </div>
  
  <script type="text/ng-template" id="generic-messages">
    <p ng-message="required" class="label label-danger">Este campo es obligatorio</p>
    <p ng-message="isNif" class="label label-danger">Formato de dni incorrecto</p>
  </script>
  
  <script>
    angular
      .module('validator.nif', ['ngMessages'])
      .factory('nifValidator', function(){
        return function (value) {
            // Acepta NIEs (Extranjeros con X, Y o Z al principio)
            // http://www.yporqueno.es/blog/javascript-validar-dni
              var numero, letraDni, letra;
              var expresion_regular_dni = /^[XYZ]?\d{5,8}[A-Z]$/;
              var result;
​
              value = ('' + value).toUpperCase();
​
              if (expresion_regular_dni.test(value) === true) {
                numero = value.substr(0, value.length - 1);
                numero = numero.replace('X', 0);
                numero = numero.replace('Y', 1);
                numero = numero.replace('Z', 2);
                letraDni = value.substr(value.length - 1, 1);
                numero = numero % 23;
                letra = 'TRWAGMYFPDXBNJZSQVHLCKET';
                letra = letra.substring(numero, numero + 1);
​
                if (letra != letraDni) {
                  result = false;
                } else {
                  result = true;
                }
              } else {
                result = false;
              }
          
          console.log('result is', result);
​
              return result;
            };
      })
      .directive('isNifOld', function (nifValidator) {
        return {
          restrict: 'A',
          require: 'ngModel',
          link: function(scope, element, attrs, ngModelCtrl) {
            var validarNif = function (value) {
              ngModelCtrl.$setValidity('isNif', nifValidator(value));
              return value;
            };  
          
            ngModelCtrl.$parsers.unshift(validarNif);
            ngModelCtrl.$formatters.push(validarNif);
          }
        }
      })
      .directive('isNif', function (nifValidator) {
        return {
          restrict: 'A',
          require: 'ngModel',
          link: function(scope, element, attrs, ngModelCtrl) {            
            ngModelCtrl.$validators.isNif = function (modelValue, viewValue) {
              return nifValidator(modelValue || viewValue);
            };
          }
        }
      });
  </script>
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
alejandroSuchpro
0viewers