npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ngx-iban-validator

v1.2.0

Published

IBAN Validator for your web application forms (Angular, React, Vue, ...), comes without any dependencies and can be used as a standalone function in any JS project. It can perform format, digit and length IBAN validations. Currently 108 countries are supp

Downloads

7,951

Readme

IBAN Validator

IBAN Validator for your web application forms (Angular, React, Vue, ...), comes without any dependencies and can be used as a standalone function in any JS project. It can perform format, digit and length IBAN validations. Currently 108 countries are supported.

Content

Install

npm install ngx-iban-validator --save

Use as a standalone function

You can use validateIBAN function independently from any forms.

Value can be passed as part of object in this case validation flow will be the same as for form validation:

  • If IBAN is valid as result of validation null is returned.

  • If IBAN is invalid and some of the checks fail IBANValidationResult object is returned containing more info about error.

const ibanIsInvalid =
  validateIBAN({
    value: "AL35202111090000000001234567",
  }) !== null;

Value can be passed as a string:

  • For valid and invalid IBAN IBANValidationResult object is returned
const ibanIsInvalid = validateIBAN("AL35202111090000000001234567").ibanInvalid;

NodeJS

const ibanValidator = require("ngx-iban-validator");
const ibanIsInvalid = ibanValidator.validateIBAN(
  "BA393385804800211234"
).ibanInvalid;

Error Response

  • If IBAN is valid as result of validation null is returned.

  • If IBAN is invalid and some of the checks fail IBANValidationResult object is returned containing more info about error.

export interface IBANValidationResult {
  ibanInvalid: boolean;
  error: IBANError;
}

export interface IBANError {
  countryUnsupported: boolean;
  codeLengthInvalid: boolean;
  patternInvalid: boolean;
}

Error object contains more details about validation error. You can display errors easily as with any other validator.

Use as a form validator

Angular

Import validateIBAN function from ngx-iban-validator package into your component file. Add validateIBAN to your form validators array.

import { Component, inject } from "@angular/core";
import { NgIf } from "@angular/common";
import {
  FormBuilder,
  FormGroup,
  ReactiveFormsModule,
  Validators,
} from "@angular/forms";

import { validateIBAN } from "ngx-iban-validator";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [NgIf, ReactiveFormsModule],
  template: `
    <div class="page">
      <form [formGroup]="ibanForm" (ngSubmit)="submit(ibanForm)">
        <h2>NGX IBAN Validator</h2>
        <div>
          <input type="text" formControlName="iban" placeholder="Enter IBAN" />
          <button [disabled]="ibanForm.invalid">Submit</button>
        </div>
        <div class="validation-errors">
          <small
            *ngIf="
                ibanForm.get('iban')?.errors && ibanForm.get('iban')?.errors?.['ibanInvalid']
              "
          >
            <span
              *ngIf="ibanForm.get('iban')?.errors?.['error']['countryUnsupported']"
            >
              Country not supported
            </span>
            <span
              *ngIf="ibanForm.get('iban')?.errors?.['error']['codeLengthInvalid']"
            >
              IBAN Code length is invalid
            </span>
            <span
              *ngIf="ibanForm.get('iban')?.errors?.['error']['patternInvalid']"
            >
              IBAN Code pattern is invalid
            </span>
          </small>
        </div>
      </form>
    </div>
  `,
  styles: [
    `
      .page {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      h2 {
        text-align: center;
      }
      form {
        padding: 20px;
      }
      input {
        padding: 10px;
      }
      button {
        padding: 10px;
      }
      .validation-errors {
        color: red;
      }
    `,
  ],
})
export class App {
  formBuilder = inject(FormBuilder);
  ibanForm = this.formBuilder.group({
    iban: [null, [Validators.required, validateIBAN]],
  });
  submit(form: FormGroup) {
    const { valid, value } = form;
    const { iban } = value;
    if (valid) {
      alert(`IBAN: ${iban}, is valid!`);
    }
  }
}

React

import { useState } from "react";
import {
  IBANError,
  IBANValidationResult,
  validateIBAN,
} from "ngx-iban-validator/dist/iban.validator";

import "./App.css";

function App() {
  const [error, setError] = useState<IBANError | null>(null);

  const validate = (iban: string): boolean => {
    const validation = validateIBAN({
      value: iban,
    });
    if (validation) {
      const { ibanInvalid, error }: IBANValidationResult = validation;
      if (ibanInvalid) {
        setError(error);
        return false;
      } else {
        setError(null);
        return true;
      }
    } else {
      setError(null);
      return true;
    }
  };

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    const iban = formData.get("iban") as string;
    const validation = validate(iban);
    if (validation) {
      alert("IBAN is valid");
    } else {
      alert("IBAN is not valid");
    }
  };

  const handleIbanChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { value } = event.target;
    validate(value);
  };

  return (
    <div className="page">
      <form onSubmit={handleSubmit}>
        <h2>NGX IBAN Validator</h2>
        <div>
          <input
            type="text"
            name="iban"
            placeholder="Enter IBAN"
            onChange={handleIbanChanged}
          />
          <button>Submit</button>
        </div>
        <div className="validation-errors">
          <small hidden={!error}>
            <span hidden={!error?.countryUnsupported}>
              Country not supported
            </span>
            <span hidden={!error?.codeLengthInvalid}>
              IBAN Code length is invalid
            </span>
            <span hidden={!error?.patternInvalid}>
              IBAN Code pattern is invalid
            </span>
          </small>
        </div>
      </form>
    </div>
  );
}

export default App;

Demo

Check demo applications for usage examples:

Supported countries

| Country | Country Code | Length | | ------------------------ | ------------ | ------ | | Albania | AL | 28 | | Algeria | DZ | 26 | | Andorra | AD | 24 | | Angola | AO | 25 | | Austria | AT | 20 | | Azerbaijan | AZ | 28 | | Bahrain | BH | 22 | | Belarus | BY | 28 | | Belgium | BE | 16 | | Benin | BJ | 28 | | Bosnia and Herzegovina | BA | 20 | | Brazil | BR | 29 | | Bulgaria | BG | 22 | | Burundi | BI | 16 | | Burkina Faso | BF | 28 | | Cameroon | CM | 27 | | Cape Verde | CV | 25 | | Central African Republic | CF | 27 | | Chad | TD | 27 | | Comoros | KM | 27 | | Congo | CG | 27 | | Costa Rica | CR | 22 | | Croatia | HR | 21 | | Cyprus | CY | 28 | | Czech Republic | CZ | 24 | | Denmark | DK | 18 | | Djibouti | DJ | 27 | | Dominican Republic | DO | 28 | | Egypt | EG | 29 | | El Salvador | SV | 28 | | Equatorial Guinea | GQ | 27 | | Estonia | EE | 20 | | Falkland Islands | FK | 18 | | Faroe Islands | FO | 18 | | Finland | FI | 18 | | France | FR | 27 | | Gabon | GA | 27 | | Georgia | GE | 22 | | Germany | DE | 22 | | Gibraltar | GI | 23 | | Greece | GR | 27 | | Greenland | GL | 18 | | Guatemala | GT | 28 | | Guinea-Bissau | GW | 25 | | Vatican | VA | 22 | | Honduras | HN | 28 | | Hungary | HU | 28 | | Iceland | IS | 26 | | Iran | IR | 26 | | Iraq | IQ | 23 | | Ireland | IE | 22 | | Israel | IL | 23 | | Italy | IT | 27 | | Ivory Coast | CI | 28 | | Jordan | JO | 30 | | Kazakhstan | KZ | 20 | | Kosovo | XK | 20 | | Kuwait | KW | 30 | | Latvia | LV | 21 | | Lebanon | LB | 28 | | Libya | LY | 25 | | Liechtenstein | LI | 21 | | Lithuania | LT | 20 | | Luxembourg | LU | 20 | | Madagascar | MG | 27 | | Mali | ML | 28 | | Malta | MT | 31 | | Mauritania | MR | 27 | | Mauritius | MU | 30 | | Moldova | MD | 24 | | Monaco | MC | 27 | | Mongolia | MN | 20 | | Montenegro | ME | 22 | | Morocco | MA | 28 | | Mozambique | MZ | 25 | | Netherlands | NL | 18 | | Nicaragua | NI | 32 | | Niger | NE | 28 | | North Macedonia | MK | 19 | | Norway | NO | 15 | | Pakistan | PK | 24 | | Palestine | PS | 29 | | Poland | PL | 28 | | Portugal | PT | 25 | | Qatar | QA | 29 | | Romania | RO | 24 | | Russia | RU | 33 | | Saint Lucia | LC | 32 | | San Marino | SM | 27 | | Sao Tome and Principe | ST | 25 | | Saudi Arabia | SA | 24 | | Senegal | SN | 28 | | Serbia | RS | 22 | | Seychelles | SC | 31 | | Slovak Republic | SK | 24 | | Slovenia | SI | 19 | | Somalia | SO | 23 | | Spain | ES | 24 | | Sudan | SD | 18 | | Sultanate of Oman | OM | 23 | | Sweden | SE | 24 | | Switzerland | CH | 21 | | Timor-Leste | TL | 23 | | Togo | TG | 28 | | Tunisia | TN | 24 | | Turkey | TR | 26 | | Ukraine | UA | 29 | | United Arab Emirates | AE | 23 | | United Kingdom | GB | 22 | | Virgin Islands, British | VG | 24 |

Development

Install dependencies

npm i

Test

npm run test

Build

npx tsc

Changelog

v 1.2.0

  • Updated documentation

v 1.1.9

  • Added support for Sultanate of Oman

v 1.1.8

  • Added support for Falkland Islands

v 1.1.7

  • Added support for Djibouti and Somalia

v 1.1.6

  • Updated error display logic
  • Value can be passed directly as a string or part of the object.
    • If value is passed as a part of object same logic as for form validation is applied:
      • If IBAN is valid as result of validation null is returned.
      • If IBAN is invalid and some of the checks fail IBANValidationResult object is returned containing more info about error.
    • If value is passed as a string:
      • For valid and invalid IBAN IBANValidationResult object is returned.
  • Return null for valid form field to fix issue with disabling | enabling buttons
    • Thnx to @pramodEE for reporting the issue

v 1.1.5

Added additional pattern validation Added more tests to improve test coverage Added support for new countries: Algeria, Angola, Benin, Burkina Faso, Burundi, Cameroon, Cape Verde, Central African Republic, Chad, Comoros, Congo, Equatorial Guinea, Gabon, Guinea-Bissau, Honduras, Iran, Ivory Coast, Madagascar, Mali, Mongolia, Morocco, Mozambique, Nicaragua, Niger, Russia, Senegal, Togo

v 1.1.4

Avoid Angular warnings for old CommonJS module usage (see https://angular.io/guide/build#configuring-commonjs-dependencies)

Replaced mocha and chai with JEST for tests

v 1.1.3

Added support for new countries: Vatican, Libya, Sao Tome and Principe, Sudan Updated length for LC Saint Lucia from 30 to 32

Added Tests Added Mocha and Chai for testing

v 1.1.2

Updated length for CR to 22 - @freddy36

Read more

IBAN Examples