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

phone validator

Validate a phone number

Validators

Options

* — Required option

Option HTML attribute Type Description
country* data-fv-phone-country String An ISO-3166 country code.
It's dynamic option
message data-fv-phone-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-phone="true".
The message and other options can be updated on the fly via the updateMessage() and updateOption() methods
Since the plugin doesn't support HTML 5 type="tel" attribute, you should use type="text" instead.

If you want to support custom formats of a phone number, you should use the transformer option. The modifying the value before validating example is good starting point.

The supported countries are:

You should look at the Validating international phone numbers example to see how to integrate the intl-tel-input plugin that supports most of phone numbers in the world
No. Country Code Valid examples Invalid examples
1 United States US
2 United Arab Emirates AE
3 Bulgaria BG
4 Brazil BR
5 China CN
6 Czech Republic CZ
7 Denmark DK
8 France FR
9 Germany DE
10 India IN
11 Morocco MA
12 Netherlands NL
13 Pakistan PK
14 Romania RO
15 Russia RU
16 Slovakia SK
17 Spain ES
18 Thailand TH
19 United Kingdom GB
20 Venezuela VE

Example

<form id="phoneForm" 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="BG">Bulgaria</option>
                <option value="BR">Brazil</option>
                <option value="CN">China</option>
                <option value="CZ">Czech Republic</option>
                <option value="DK">Denmark</option>
                <option value="FR">France</option>
                <option value="DE">Germany</option>
                <option value="IN">India</option>
                <option value="MA">Morocco</option>
                <option value="NL">Netherlands</option>
                <option value="PK">Pakistan</option>
                <option value="RO">Romania</option>
                <option value="RU">Russia</option>
                <option value="SK">Slovakia</option>
                <option value="ES">Spain</option>
                <option value="TH">Thailand</option>
                <option value="AE">United Arab Emirates</option>
                <option value="GB">United Kingdom</option>
                <option value="VE">Venezuela</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Phone number</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="phoneNumber" />
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#phoneForm')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                phoneNumber: {
                    validators: {
                        phone: {
                            country: 'countrySelectBox',
                            message: 'The value is not valid %s phone number'
                        }
                    }
                }
            }
        })
        // Revalidate phone number when changing the country
        .on('change', '[name="countrySelectBox"]', function(e) {
            $('#phoneForm').formValidation('revalidateField', 'phoneNumber');
        });
});
</script>
<form id="phoneForm" 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="BG">Bulgaria</option>
                <option value="BR">Brazil</option>
                <option value="CN">China</option>
                <option value="CZ">Czech Republic</option>
                <option value="DK">Denmark</option>
                <option value="FR">France</option>
                <option value="DE">Germany</option>
                <option value="IN">India</option>
                <option value="MA">Morocco</option>
                <option value="NL">Netherlands</option>
                <option value="PK">Pakistan</option>
                <option value="RO">Romania</option>
                <option value="RU">Russia</option>
                <option value="SK">Slovakia</option>
                <option value="ES">Spain</option>
                <option value="TH">Thailand</option>
                <option value="AE">United Arab Emirates</option>
                <option value="GB">United Kingdom</option>
                <option value="VE">Venezuela</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Phone number</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="phoneNumber"
                data-fv-phone="true"
                data-fv-phone-country="countrySelectBox"
                data-fv-phone-message="The value is not valid %s phone number" />
        </div>
    </div>
</form>

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

Related validators

The following validators might be useful to you: