uri validator

Validate an URL address

Options

Using with form field
The HTML attributes are used to set the validator options via the Declarative plugin
NameHTML attributeTypeDescription
allowLocaldata-fv-uri___allow-localBooleanAllow the private and local network IP. It is false, by default
messagedata-fv-uri___messageStringThe error message
protocoldata-fv-uri___protocolStringThe protocols, separated by a comma. By default, it is set to http, https, ftp
allowEmptyProtocoldata-fv-uri___allow-empty-protocolBooleanAllow the URI without protocol. Default to false
Using with ES6 module
// You might need to change the importing path
import uri from 'formvalidation/dist/es6/validators/uri';
const result = uri().validate({
value: ...,
options: {
allowLocal: ...,
message: ...,
protocol: ...,
allowEmptyProtocol: ...,
},
});
/*
result is an object of
{
valid: true or false,
message: The error message
}
*/

Basic example

Basic example

HTML5 Example

When the Declarative plugin is used, the uri validator will be turned on automatically if the input uses HTML 5 type="url" attribute.
HTML5 example

ES6 Module Example

The following snippet shows how to use the uri validator with ES6 module:
// You might need to change the importing path
import uri from 'formvalidation/dist/es6/validators/uri';
const res1 = uri().validate({
value: 'http://foo.com/blah_blah_(wikipedia)',
options: {
message: 'The input is not a valid URL',
},
});
// res1.valid === true
const res2 = uri().validate({
value: 'http://foo.bar?q=Spaces should be encoded',
options: {
allowLocal: true,
message: 'The input is not a valid URL',
},
});
// res2.valid === false
const res3 = uri().validate({
value: 'news://foo.com/blah_blah',
options: {
allowEmptyProtocol: true,
message: 'The input is not a valid URL',
},
});
// res3.valid === true

See also