FormValidation v0.8.1 is released, supports Bootstrap 4 alpha 3

zipCode validator

Validate a zip code

← Validators

Options

* — Required option

Option HTML attribute Type Description
country* data-fv-zipcode-country String An ISO-3166 country code.
It's dynamic option
message data-fv-zipcode-message String The error message. The dynamic message is supported
When setting options via HTML attributes, remember to enable the validator by setting data-fv-zipcode="true".
The message and other options can be updated on the fly via the updateMessage() and updateOption() methods

Currently, the validator supports the following countries:

No. Country Code Valid ejemplos Invalid ejemplos
1 United States US
2 Austria AT
3 Bulgaria BG
4 Brazil BR
5 Canada CA
6 Czech Republic CZ
7 Denmark DK
8 French FR
9 Germany DE
10 India IN
11 Italy IT
12 Ireland IE
13 Morocco MA
14 Netherlands NL
15 Poland PL
16 Portugal PT
17 Romania RO
18 Russia RU
19 Singapore SG
20 Slovakia SK
21 Spain ES
22 Sweden SE
23 Switzerland CH
24 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:

$(document).ready(function() {
    $('#postcodeForm').formValidation({
        fields: {
            postcode: {
                validators: {
                    regexp: {
                        regexp: /^\d{5}$/,
                        message: 'The US zipcode must contain 5 digits'
                    }
                }
            }
        }
    });
});

Example

Basic example

<form id="zipCodeForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Country</label>
        <div class="col-xs-5">
            <select class="form-control" name="countrySelectBox">
                <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>
                <option value="DK">Denmark</option>
                <option value="FR">French</option>
                <option value="DE">Germany</option>
                <option value="IN">India</option>
                <option value="IT">Italy</option>
                <option value="IE">Ireland</option>
                <option value="MA">Morocco</option>
                <option value="NL">Netherlands</option>
                <option value="PL">Poland</option>
                <option value="PT">Portugal</option>
                <option value="RO">Romania</option>
                <option value="RU">Russia</option>
                <option value="SG">Singapore</option>
                <option value="SK">Slovakia</option>
                <option value="ES">Spain</option>
                <option value="SE">Sweden</option>
                <option value="CH">Switzerland</option>
                <option value="GB">United Kingdom</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Postal code</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="postalCode" />
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#zipCodeForm')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                postalCode: {
                    validators: {
                        zipCode: {
                            country: 'countrySelectBox',
                            message: 'The value is not valid %s postal code'
                        }
                    }
                }
            }
        })
        // Revalidate postal code when changing the country
        .on('change', '[name="countrySelectBox"]', function(e) {
            $('#zipCodeForm').formValidation('revalidateField', 'postalCode');
        });
});
</script>
<form id="zipCodeForm" class="form-horizontal"
    data-fv-framework="bootstrap"
    data-fv-icon-valid="glyphicon glyphicon-ok"
    data-fv-icon-invalid="glyphicon glyphicon-remove"
    data-fv-icon-validating="glyphicon glyphicon-refresh">

    <div class="form-group">
        <label class="col-xs-3 control-label">Country</label>
        <div class="col-xs-5">
            <select class="form-control" name="countrySelectBox">
                <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>
                <option value="DK">Denmark</option>
                <option value="FR">French</option>
                <option value="DE">Germany</option>
                <option value="IN">India</option>
                <option value="IT">Italy</option>
                <option value="IE">Ireland</option>
                <option value="MA">Morocco</option>
                <option value="NL">Netherlands</option>
                <option value="PL">Poland</option>
                <option value="PT">Portugal</option>
                <option value="RO">Romania</option>
                <option value="RU">Russia</option>
                <option value="SG">Singapore</option>
                <option value="SK">Slovakia</option>
                <option value="ES">Spain</option>
                <option value="SE">Sweden</option>
                <option value="CH">Switzerland</option>
                <option value="GB">United Kingdom</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Postal code</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="postalCode"
                data-fv-zipcode="true"
                data-fv-zipcode-country="countrySelectBox"
                data-fv-zipcode-message="The value is not valid %s postal code" />
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#zipCodeForm')
        .formValidation()
        // Revalidate the zipcode when changing the country
        .on('change', '[name="countrySelectBox"]', function(e) {
            $('#zipCodeForm').formValidation('revalidateField', 'postalCode');
        });
});
</script>

Using dynamic country option with different value

In the example above, the country option is set to the name of a country select box (countrySelectBox). It requires that value of country select box must be the country code as following:

<select class="form-control" name="countrySelectBox">
    <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="form-control" name="countrySelectBox">
    <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:

$('#zipCodeForm').formValidation({
    framework: 'bootstrap',
    icon: {
        ...
    },
    fields: {
        postalCode: {
            validators: {
                zipCode: {
                    country: function(value, validator, $field) {
                        // Map the country names to the code
                        var 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
                        var country = $('#zipCodeForm').find('[name="countrySelectBox"]').val();

                        // Return the country code based on selected name
                        return (country == '') ? '' : (map[country] || '');
                    },
                    message: 'The value is not valid %s postal code'
                }
            }
        }
    }
});
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.

You can take a look at the Programmatic code tab to see the full code:

<form id="zipCodeForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Country</label>
        <div class="col-xs-5">
            <select class="form-control" name="countrySelectBox">
                <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>
                <option value="Denmark">Denmark</option>
                <option value="French">French</option>
                <option value="Germany">Germany</option>
                <option value="India">India</option>
                <option value="Italy">Italy</option>
                <option value="Ireland">Ireland</option>
                <option value="Morocco">Morocco</option>
                <option value="Netherlands">Netherlands</option>
                <option value="Poland">Poland</option>
                <option value="Portugal">Portugal</option>
                <option value="Romania">Romania</option>
                <option value="Russia">Russia</option>
                <option value="Singapore">Singapore</option>
                <option value="Slovakia">Slovakia</option>
                <option value="Spain">Spain</option>
                <option value="Sweden">Sweden</option>
                <option value="Switzerland">Switzerland</option>
                <option value="United Kingdom">United Kingdom</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Postal code</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="postalCode" />
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#zipCodeForm')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                postalCode: {
                    validators: {
                        zipCode: {
                            country: function(value, validator, $field) {
                                // Map the country names to the code
                                var 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
                                var country = $('#zipCodeForm').find('[name="countrySelectBox"]').val();

                                return (country == '') ? '' : (map[country] || '');
                            },
                            message: 'The value is not valid %s postal code'
                        }
                    }
                }
            }
        })
        // Revalidate postal code when changing the country
        .on('change', '[name="countrySelectBox"]', function(e) {
            $('#zipCodeForm').formValidation('revalidateField', 'postalCode');
        });
});
</script>

Related validators

The following validators might be useful to you:

← vin validator ejemplos →