🌍 @codecorn/euro-plate-validator

✨ Features

📦 Installation

npm install @codecorn/euro-plate-validator

🔗 CDN (v1.0.15)

Core module

Client SDK (UI)

Assets (CSS)

🧠 Core API

Node.js / TypeScript

import { validatePlate } from "@codecorn/euro-plate-validator";
// Italy (car)
validatePlate("AB 123 CD", ["IT"], { vehicleType: "car" });
// → { isValid: true, matches: [{country:"IT", name:"Italy"}], checked:["IT"] }
// UK vs IE
validatePlate("AB12 CDE", ["UK", "IE"]);

🧩 Browser Client SDK — createEuroPlate()

🧠 Core API ( Node / TS )

import { validatePlate } from "@codecorn/euro-plate-validator";
// IT (car)
validatePlate("AB 123 CD", ["IT"], { vehicleType: "car" });
// → { isValid: true, matches:[{country:"IT", name:"Italy"}], checked:["IT"] }
// UK vs IE
validatePlate("AB12 CDE", ["UK", "IE"]);

🧩 Client SDK ( UI ) — createEuroPlate

Main options ( including new ones )

type EuroPlateOptions = {
 // DOM
 input?: HTMLInputElement; // external input
 wrapper?: string | HTMLElement | false; // if provided → auto-build UI
 inputId?: string; // default: derived ( e.g., "epv-xxxx-plate" )
 inputName?: string; // default: same
 preserveInputAttrs?: boolean; // NEW: if true, does NOT overwrite existing id/name
 autoFocusOnInit?: boolean; // NEW: default false ( no focus on init )
 // ⚙️ UI configuration ( new: EVERYTHING under "ui" )
 ui?: {
 /**
 * Where to show the status :
 * - "block" → uses <div class="status"> under the input ( back-compat , default )
 * - "inline" → overlays inside the input , does not change height
 * - "off" → hides status text / icon
 */
 statusMode?: "block" | "inline" | "off"; // default: "block"
 /** Icon type for inline status ( ignored in "block" and "off" ) */
 statusIcon?: "none" | "icon" | "pill"; // default: "none"
 /** Whether to show status text */
 showStatusText?: boolean; // default: block→true , inline→false
 /** Inline icon position */
 iconPosition?: "right" | "left"; // default: "right"
 // Optional references to existing nodes ( when NOT using wrapper )
 flagIcon?: HTMLElement;
 flagLabel?: HTMLElement;
 dropdown?: HTMLElement;
 button?: HTMLElement;
 status?: HTMLElement;
 };
 // UX / i18n
 mode?: "AUTO" | string; // fixed country or AUTO ( default )
 i18n?: "AUTO" | "IT" | "EN"; // default AUTO → navigator it / en
 allowedCountries?: string[]; // whitelist ; default : all
 vehicleType?: "any" | "car" | "bike"; // default : any
 placeholders?: { auto?: string }; // placeholder for AUTO
 // Normalization / formatting
 normalize?: (code: string) => string; // default GB→UK
 formatters?: Record<string, (s: string) => string>; // per country code
 // Timings
 timings?: { debounce?: number; clear?: number };
 // Dependencies / logging
 deps?: { inputmask?: any }; // manual inject ( e.g., window.Inputmask )
 autoLoadDeps?: { inputmask?: boolean }; // default : true ( autoload UMD )
 cdn?: { inputmask?: string }; // override Inputmask CDN URL
 logger?: Logger;
 debug?: boolean;
};

Values and defaults ( UI )

Instance methods

type EuroPlateInstance = {
 setCountry(code: "AUTO" | string): void; // alias of setMode
 setMode(m: "AUTO" | string): void; // set fixed country or AUTO
 setAllowed(codes: string[]): void; // dynamic whitelist
 setVehicleType(t: "any" | "car" | "bike"): void;
 setI18n(code: "AUTO" | "IT" | "EN"): void;
 setDebug(on: boolean): void;
 validate(): { ok: boolean; country?: string; value: string };
 destroy(): void;
 getI18n(): "it" | "en";
};

🖼️ Usage examples

A ) Quick start with a shared common config + autoload deps ( Inputmask , jQuery , Toastr )

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@codecorn/euro-plate-validator@1.0.15/dist/assets/css/styles.css" />
<div id="plateBox"></div>
<script type="module">
 import * as EuroMod from "https://cdn.jsdelivr.net/npm/@codecorn/euro-plate-validator@1.0.15/dist/browser/index.esm.js";
 import { createEuroPlate } from "https://cdn.jsdelivr.net/npm/@codecorn/euro-plate-validator@1.0.15/dist/client/index.mjs";
 // Common options used across examples
 const common = {
 mode: "AUTO",
 i18n: "IT",
 allowedCountries: ["IT", "FR", "DE", "ES"],
 vehicleType: "any",
 autoFocusOnInit: false,
 ui: {
 statusMode: "inline",
 statusIcon: "icon",
 showStatusText: true, // | false
 iconPosition: "right",
 },
 // Autoload deps (UMD) from CDN
 autoLoadDeps: { inputmask: true, jquery: true, toastr: true },
 // Optional : route logs to Toastr if available
 useToastrLogger: true,
 debug: true,
 };
 createEuroPlate(EuroMod, {
 wrapper: "#plateBox", // optional
 ...common,
 });
</script>

B ) You provide Inputmask manually ( UMD → window.Inputmask )

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@codecorn/euro-plate-validator@1.0.15/dist/assets/css/styles.css" />
<script src="https://cdn.jsdelivr.net/npm/inputmask@5.0.9/dist/inputmask.min.js"></script>
<script type="module">
 import * as EuroMod from "https://cdn.jsdelivr.net/npm/@codecorn/euro-plate-validator@1.0.15/dist/browser/index.esm.js";
 import { createEuroPlate } from "https://cdn.jsdelivr.net/npm/@codecorn/euro-plate-validator@1.0.15/dist/client/index.mjs";
 createEuroPlate(EuroMod, {
 wrapper: "#plateBox",
 i18n: "AUTO",
 autoFocusOnInit: false,
 deps: { inputmask: window.Inputmask }, // manual inject
 });
</script>

C ) Autoload deps from CDN ( default , Inputmask only )

<script type="module">
 import * as EuroMod from "https://cdn.jsdelivr.net/npm/@codecorn/euro-plate-validator@1.0.15/dist/browser/index.esm.js";
 import { createEuroPlate } from "https://cdn.jsdelivr.net/npm/@codecorn/euro-plate-validator@1.0.15/dist/client/index.mjs";
 createEuroPlate(EuroMod, {
 wrapper: "#plateBox",
 i18n: "AUTO",
 autoFocusOnInit: false,
 // No deps object → will autoload Inputmask UMD from jsDelivr
 });
</script>

D ) Autoload ON with a custom CDN URL

createEuroPlate(EuroMod, {
 wrapper: "#plateBox",
 cdn: { inputmask: "https://unpkg.com/inputmask@5.0.9/dist/inputmask.min.js" },
});

E ) Disable autoload ( "no mask" fallback , no error )

createEuroPlate(EuroMod, {
 wrapper: "#plateBox",
 autoLoadDeps: { inputmask: false },
});

F ) Attach to an existing input ( no auto-build )

<input id="myPlate" />
<script type="module">
 import * as EuroMod from ".../index.esm.js";
 import { createEuroPlate } from ".../index.mjs";
 createEuroPlate(EuroMod, {
 input: document.getElementById("myPlate"),
 inputName: "plate_number",
 preserveInputAttrs: true, // do NOT overwrite existing id/name
 i18n: "EN",
 mode: "AUTO",
 autoFocusOnInit: false,
 });
</script>

🧩 WordPress ( WP ) / Elementor

1 ) Enqueue CSS + init helper ( type = "module" )

add_action('wp_enqueue_scripts', function () {
 wp_register_script('epv-init', '', [], null, true);
 wp_enqueue_style(
 'epv-styles',
 'https://cdn.jsdelivr.net/npm/@codecorn/euro-plate-validator@1.0.15/dist/assets/css/styles.css',
 [],
 '1.0.15'
 );
 add_filter('script_loader_tag', function ($tag, $handle) {
 if ($handle === 'epv-init') {
 return '<script type="module">' .
 'import * as EuroMod from "https://cdn.jsdelivr.net/npm/@codecorn/euro-plate-validator@1.0.15/dist/browser/index.esm.js";' .
 'import { createEuroPlate } from "https://cdn.jsdelivr.net/npm/@codecorn/euro-plate-validator@1.0.15/dist/client/index.mjs";' .
 'window.__epvInit=(id,opts)=>createEuroPlate(EuroMod,Object.assign({wrapper:"#"+id,mode:"AUTO",i18n:"IT",debug:true,autoFocusOnInit:false},opts||{}));' .
 '</script>';
 }
 return $tag;
 }, 10, 2);
 wp_enqueue_script('epv-init');
});

⚙️ WordPress / Elementor integration

🧪 CLI Tool

npx @codecorn/euro-plate-validator "AB 123 CD" --countries IT,FR,DE --type car --pretty

🌍 Supported Countries

🧾 Changelog (highlights)

1.0.15

1.0.13

1.0.12

1.0.10–11

📝 License

👤 Maintainer

🤝 Contributing