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

uri validator

Validate an URL address

Validators

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.
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.
URL Result
Valid URL examples
http://foo.com/blah_blah
http://foo.com/blah_blah/
http://foo.com/blah_blah_(wikipedia)
http://foo.com/blah_blah_(wikipedia)_(again)
http://www.example.com/wpstyle/?p=364
https://www.example.com/foo/?bar=baz&inga=42&quux
http://✪df.ws/123
http://userid:password@example.com:8080
http://userid:password@example.com:8080/
http://userid@example.com
http://userid@example.com/
http://userid@example.com:8080
http://userid@example.com:8080/
http://userid:password@example.com
http://userid:password@example.com/
http://142.42.1.1/
http://142.42.1.1:8080/
http://➡.ws/䨹
http://⌘.ws
http://⌘.ws/
http://foo.com/blah_(wikipedia)#cite-1
http://foo.com/blah_(wikipedia)_blah#cite-1
http://foo.com/unicode_(✪)_in_parens
http://foo.com/(something)?after=parens
http://☺.damowmow.com/
http://code.google.com/events/#&product=browser
http://j.mp
ftp://foo.bar/baz
http://foo.bar/?q=Test%20URL-encoded%20stuff
http://مثال.إختبار
http://例子.测试
http://उदाहरण.परीक्षा
http://-.~_!$&'()*+,;=:%40:80%2f::::::@example.com
http://1337.net
http://a.b-c.de
http://223.255.255.254
Invalid URL examples
http://
http://.
http://..
http://../
http://?
http://??
http://??/
http://#
http://##
http://##/
http://foo.bar?q=Spaces should be encoded
//
//a
///a
///
http:///a
foo.com
rdar://1234
h://test
http:// shouldfail.com
:// should fail
http://foo.bar/foo(bar)baz quux
ftps://foo.bar/
http://-error-.invalid/
http://a.b--c.de/
http://-a.b.co
http://a.b-.co
http://0.0.0.0
http://10.1.1.0
http://10.1.1.255
http://224.1.1.1
http://1.1.1.1.1
http://123.123.123
http://3628126748
http://.www.foo.bar/
http://www.foo.bar./
http://.www.foo.bar./
http://10.1.1.1
http://10.1.1.254
<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: