remote validator

Perform remote checking via Ajax request

Options

Using with form field

* presents a required option. The HTML attributes are used to set the validator options via the Declarative plugin

Name HTML attribute Type Description
crossDomain data-fv-remote___cross-domain Boolean Set it to true if you want to have a cross domain request. By default, it's set to false
data data-fv-remote___data Object or Function

The data sent to remote URL. You don't need to use this option if there is only field, defined as field name, sent to the remote URL.

If you want to use dynamic data, then use a callback as following:

When using data-fv-remote___data attribute, its value must be an encoded JSON string.

headers data-fv-remote___headers Object Additonal headers that will be sent with the request
message data-fv-remote___message String The error message
name data-fv-remote___name String The name of field which need to validate
method data-fv-remote___method String The method used to send data to back-end. It can be GET (the default value) or POST
url* data-fv-remote___url String or Function

The remote URL. If you want to use a dynamic URL, then use a callback as following:

validKey data-fv-remote___valid-key String The valid key. It's valid by default. This option is useful when connecting to external remote server or APIs provided by 3rd parties.

The crossDomain and validKey options are mostly used when you need to connect to external API endpoint.

The remote URL has to return an encoded JSON of array containing the valid key (the key name can be changed by the validKey option):

Using with ES6 module

Basic example

The following example shows how to use a remote back-end to check if a given username is already taken or not.

The back-end then will determine if the username is available or not, and finally returns a JSON { "valid": true } or { "valid": false }. The code bellow demonstrates a simple back-end written in PHP:

Sending static data example

For example, there is same back-end for validating both username and email address. The back-end uses additional parameter named type to determine which field is going to be validated.

The code bellow demonstrates a simple back-end written in PHP:

Sending dynamic data example

For instance, the registration form need to validate both the username and emails.

Overriding name example

By default, it will be set as the name of field. You can override the name option by using the data-fv-remote___name attribute. Here are two cases which you might need to use this attribute.

Using different names for same field

For example, the Sign up and Profile forms use the same back-end URL to validate the email address which is declared with different name.

In this case, use the same data-fv-remote___name attribute and the back-end will get the same data key.

Note

Remember to use the Declarative plugin to turn on the validator options with the equivalent HTML attributes

Using same backend for different fields

Assume that the profile form asks you to update multiple email address (primary, secondary, for example). These emails will be validated by the same backend.

In this case, just use the same data-fv-remote___name attribute for these email address fields.

More examples

Related validators

The following validators might be useful to you.