--- parts: - Input Iban - Use Cases title: 'Input Iban: Use Cases' eleventyNavigation: key: 'Input Iban: Use Cases' order: 20 parent: Input Iban title: Use Cases --- # Input Iban: Use Cases ```js script import { html } from '@mdjs/mdjs-preview'; import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js'; import { IsCountryIBAN, IsNotCountryIBAN } from '@lion/ui/input-iban.js'; import '@lion/ui/define/lion-input-iban.js'; ``` ## Prefilled ```js preview-story export const prefilled = () => html` `; ``` ## Faulty Prefilled ```js preview-story export const faultyPrefilled = () => html` `; ``` ## Country Restrictions By default, we validate the input to ensure the IBAN is valid. To get the default feedback message for this default validator, use `loadDefaultFeedbackMessages` from `@lion/form-core`. In the example below, we show how to use an additional validator that restricts the `input-iban` to IBANs from only certain countries. ```js preview-story export const countryRestrictions = () => { loadDefaultFeedbackMessages(); return html`
Demo instructions: you can use NL20 INGB 0001 2345 67 `; }; ``` You can pass a single string value, or an array of strings. The latter may be useful, for example if you only want to allow BeNeLux IBANs. ```js preview-story export const countryRestrictionsMultiple = () => { loadDefaultFeedbackMessages(); return html`
Demo instructions: you can use: `; }; ``` ## Blacklisted Country By default, we validate the input to ensure the IBAN is valid. To get the default feedback message for this default validator, use `loadDefaultFeedbackMessages` from `@lion/form-core`. In the example below, we show how to use an additional validator that blocks IBANs from certain countries. You can pass a single string value, or an array of strings. ```js preview-story export const blacklistedCountry = () => { loadDefaultFeedbackMessages(); return html`
Demo instructions: Try RO 89 RZBR 6997 3728 4864 5577 and watch it fail `; }; ```