v0.5.3 is released on 2014.11.05!

phone validator

Validate a phone number

← Validators

Improve it on Github

Options

Option HTML attribute Type Description
country* data-bv-phone-country String An ISO-3166 country code.
It's dynamic option
message data-bv-phone-message String The error message
When setting options via HTML attributes, remember to enable the validator by setting data-bv-phone="true".
Since the plugin doesn't support HTML 5 type="tel" attribute, you should use type="text" instead.

The supported countries are:

No. Country Code Valid examples Invalid examples
1 United States US
2 Brazil BR
3 China CN
4 Czech Republic CZ
5 Denmark DK
6 France FR
7 Germany DE
8 Morocco MA
9 Pakistan PK
10 Romania RO
11 Russia RU
12 Slovakia SK
13 Spain ES
14 Thailand TH
15 United Kingdom GB
16 Venezuela VE

Example

<form id="phoneForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-3 control-label">Country</label>
        <div class="col-sm-5">
            <select class="form-control" name="countrySelectBox">
                <option value="US">United States</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="MA">Morocco</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="GB">United Kingdom</option>
                <option value="VE">Venezuela</option>
                
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-3 control-label">Phone number</label>
        <div class="col-sm-5">
            <input type="text" class="form-control" name="phoneNumber" />
        </div>
    </div>
</form>
$(document).ready(function() {
    $('#phoneForm')
        .bootstrapValidator({
            feedbackIcons: {
                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').bootstrapValidator('revalidateField', 'phoneNumber');
        });
});
<form id="phoneForm" class="form-horizontal"
    data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
    data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
    data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">

    <div class="form-group">
        <label class="col-sm-3 control-label">Country</label>
        <div class="col-sm-5">
            <select class="form-control" name="countrySelectBox">
                <option value="US">United States</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="MA">Morocco</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="GB">United Kingdom</option>
                <option value="VE">Venezuela</option>
                
            </select>
        </div>
    </div>

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

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

Related validators

The following validators might be useful to you: