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
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: