zipCode validator

Validate zip codes in different countries

Options

Using with form field

The HTML attributes are used to set the validator options via the Declarative plugin

(* denotes a required option)

Name	HTML attribute	Type	Description
`country` *	`data-fv-zip-code___country`	`String` or `Function`	An ISO-3166 country code
`message`	`data-fv-zip-code___message`	`String`	The error message

If you want to support custom formats of a zipCode number, you should use the Transformer plugin.

The validator supports the following countries:

Country	Country code
United States	US
Austria	AT
Bulgaria	BG
Brazil	BR
Canada	CA
Czech Republic	CZ
Denmark	DK
France	FR
Germany	DE
India	IN
Italy	IT
Ireland	IE
Morocco	MA
Netherlands	NL
Poland	PL
Portugal	PT
Romania	RO
Russia	RU
Singapore	SG
Slovakia	SK
Spain	ES
Sweden	SE
Switzerland	CH
United Kingdom	GB

US zipcode

This validator supports 4 digits US zipcode. If you want a valid US zipcode to be 5 digits exactly, use the regexp validator:

<script>
    document.addEventListener('DOMContentLoaded', function (e) {
        FormValidation.formValidation(document.getElementById('demoForm'), {
            fields: {
                postcode: {
                    validators: {
                        regexp: {
                            regexp: /^\d{5}$/,
                            message: 'The US zip code must contain 5 digits',
                        },
                    },
                },
            },
        });
    });
</script>

Using the ES6 module

// You might need to change the importing path
import { zipCode } from '/vendors/@form-validation/cjs/validator-zip-code';

const result = zipCode().validate({
    value: ...,
    options: {
        // Can be a string or a function returns a string
        country: ...,
        message: ...,
    },
});
/*
result is an object of
{
    valid: true or false,
    message: The error message
}
*/

Using the npm package

Install the validator package:

$ npm install @form-validation/validator-zip-code

Use the zipCode validator:

import { zipCode } from '@form-validation/validator-zip-code';

const result = zipCode().validate({
    value: ...,
    options: {
        // Can be a string or a function returns a string
        country: ...,
        message: ...,
    },
});

Basic example

zipCode validator

Using country option with different value

In the example above, the value of country select box must be the country code as following.

<select class="input-reset ba b--black-20 pa2 mb2 db w-100" name="country">
    <option value="US">United States</option>
    <option value="AT">Austria</option>
    <option value="BG">Bulgaria</option>
    <option value="BR">Brazil</option>
    <option value="CA">Canada</option>
    <option value="CZ">Czech Republic</option>
    ...
</select>

In the case that the value attribute of option can't exactly be the country code, instead, be a country name for example:

<select class="input-reset ba b--black-20 pa2 mb2 db w-100" name="country">
    <option value="United States">United States</option>
    <option value="Austria">Austria</option>
    <option value="Bulgaria">Bulgaria</option>
    <option value="Brazil">Brazil</option>
    <option value="Canada">Canada</option>
    <option value="Czech Republic">Czech Republic</option>
    ...
</select>

Then we need to set the country option as a callback function returning a country code based on the selected name:

<script>
    document.addEventListener('DOMContentLoaded', function(e) {
        const form = document.getElementById('demoForm');
        const fv = FormValidation.formValidation(
            form,
            {
                fields: {
                    postalCode: {
                        validators: {
                            zipCode: {
                                country: function() {
                                    // Map the country names to the code
                                    const map = {
                                        'United States': 'US',
                                        'Austria': 'AT',
                                        'Bulgaria': 'BG',
                                        'Brazil': 'BR',
                                        'Canada': 'CA',
                                        'Czech Republic': 'CZ',
                                        'Denmark': 'DK',
                                        'French': 'FR',
                                        'Germany': 'DE',
                                        'India': 'IN',
                                        'Italy': 'IT',
                                        'Morocco': 'MA',
                                        'Netherlands': 'NL',
                                        'Poland': 'PL',
                                        'Portugal': 'PT',
                                        'Romania': 'RO',
                                        'Russia': 'RU',
                                        'Singapore': 'SG',
                                        'Slovakia': 'SK',
                                        'Spain': 'ES',
                                        'Sweden': 'SE',
                                        'Switzerland': 'CH',
                                        'United Kingdom': 'GB'
                                    };

                                    // Get the selected country
                                    const country = form.querySelector('[name="country"]').value;

                                    // Return the country code based on selected name
                                    return (country == '') ? '' : (map[country] || '');
                                },
                                message: 'The value is not a valid postal code'
                            }
                        }
                    },
                },
                plugins: {
                    ...,
                },
            }
        );

        form.querySelector('[name="country"]').addEventListener('change', function() {
            // Revalidate the postal code field whenever user changes the country
            fv.revalidateField('postalCode');
        });
    });
</script>

This case happens when you can't control the value of country select box which might be generated by a back-end side or third party.

NPM package example

The following snippet shows how to use the zipCode validator with the npm package:

import { zipCode } from '@form-validation/validator-zip-code';

const res1 = zipCode().validate({
    value: '12345',
    options: {
        country: 'US',
        message: 'The value is not a valid zipcode',
    },
});
// res1.valid === true

const res2 = zipCode().validate({
    value: '12345',
    options: {
        country: 'AT',
        message: 'The value is not a valid zipcode',
    },
});
// res2.valid === false

Changelog

v2.1.0

The validator doesn't work properly if the message property isn't defined

v2.0.0

Add the npm package

v1.9.0

The validator throws an exception if the message option isn't defined

v1.6.0

Fixed an issue that the country option isn't passed to the placeholder message

vin validator Plugins

zipCode validator

Options

Basic example

Using country option with different value

NPM package example

See also

Changelog