Options
| Option | HTML attribute | Type | Description |
|---|---|---|---|
allowLocal | data-fv-uri-allowlocal | Boolean | Allow the private and local network IP. It is false, by default. |
message | data-fv-uri-message | String | The error message |
protocol | data-fv-uri-protocol | String | The protocols, separated by a comma. By default, it is set to http, https, ftp |
allowEmptyProtocol | data-fv-uri-allowemptyprotocol | Boolean | Allow the URI without protocol. Default to false |
When setting options via HTML attributes, remember to enable the validator by setting data-fv-uri="true".
You don't need to do that when using HTML 5 type="url" attribute.
You don't need to do that when using HTML 5 type="url" attribute.
The message and other options can be updated on the fly via the updateMessage() and updateOption() methods
Examples
Basic example
Thank to Mathias Bynens for providing this amazing collection of URL examples.
<form id="uriForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Your website</label>
<div class="col-xs-6">
<input type="text" class="form-control" name="website" />
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#uriForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
website: {
validators: {
uri: {
message: 'The website address is not valid'
}
}
}
}
});
});
</script><form id="uriForm" 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">Your website</label>
<div class="col-xs-6">
<input type="text" class="form-control" name="website"
data-fv-uri="true"
data-fv-uri-message="The website address is not valid" />
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#uriForm').formValidation();
});
</script>HTML 5 example
The following form uses HTML 5 type="url" attribute to enable the uri validator.
<form id="uriHtml5Form" 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">Your website</label>
<div class="col-xs-6">
<input class="form-control" name="website"
type="url"
data-fv-uri-message="The website address is not valid" />
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#uriHtml5Form').formValidation();
});
</script>Using with regexp validator
The following example is a combination usage of the uri and regexp validators.
It asks user to enter a valid URL which ends with .jpg, .jpeg, or .png.
<form id="regexpForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Avatar URL</label>
<div class="col-xs-6">
<input type="text" class="form-control" name="avatar" />
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#regexpForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
avatar: {
validators: {
regexp: {
regexp: /\.(gif|jpg|jpeg|tiff|png)$/i,
message: 'The avatar URL must end with .jpg, .jpeg or .png'
},
uri: {
message: 'The avatar URL is not valid'
}
}
}
}
});
});
</script>Related validators
The following validators might be useful to you: