BootstrapValidator

Validators / remote

Perform remote checking via Ajax request.

Options

Option HTML attribute Type Description
data n/a Object 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.
message data-bv-remote-message String The error message
name data-bv-remote-name String The name of field which need to validate
type data-bv-remote-type String The method used to send data to back-end. It can be GET or POST default
url* data-bv-remote-url String|Function The remote URL.
If you want to use a dynamic URL, then use the callback as following: 
url: function(validator) {
    // validator is BootstrapValidator instance
    return 'the URL';
}

The remote URL has to return an encoded JSON of array containing the valid key:

{ "valid": true }

or

{ "valid": false }

Example

Basic

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

<form id="registrationForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-lg-3 control-label">Username</label>
        <div class="col-lg-5">
            <input type="text" class="form-control" name="username" />
        </div>
    </div>
</form>
$(document).ready(function() {
    $('#registrationForm').bootstrapValidator({
        fields: {
            username: {
                message: 'The username is not valid',
                validators: {
                    // The validator will create an Ajax request
                    // sending { username: 'its value' } to the back-end
                    remote: {
                        message: 'The username is not available',
                        url: '/path/to/backend/'
                    }
                }
            }
        }
    });
});
<?php
// 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

// Get the username from request
$username = $_POST['username'];

// Check its existence (for example, execute a query from the database) ...
$isAvailable = true; // or false

// Finally, return a JSON
echo json_encode(array(
    'valid' => $isAvailable,
));

Sending static data

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.

<form id="registrationForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-lg-3 control-label">Username</label>
        <div class="col-lg-5">
            <input type="text" class="form-control" name="username" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-lg-3 control-label">Email</label>
        <div class="col-lg-5">
            <input type="text" class="form-control" name="email" />
        </div>
    </div>
</form>
$(document).ready(function() {
    $('#registrationForm').bootstrapValidator({
        fields: {
            username: {
                message: 'The username is not valid',
                validators: {
                    // Send { username: 'its value', type: 'username' } to the back-end
                    remote: {
                        message: 'The username is not available',
                        url: '/path/to/backend/',
                        data: {
                            type: 'username'
                        }
                    }
                }
            },
            email: {
                message: 'The email address is not valid',
                validators: {
                    // Send { email: 'its value', type: 'email' } to the back-end
                    remote: {
                        message: 'The email is not available',
                        url: '/path/to/backend/',
                        data: {
                            type: 'email'
                        }
                    }
                }
            }
        }
    });
});
<?php
// The code bellow demonstrates a simple back-end written in PHP
// Determine which field you want to check its existence
$isAvailable = true;

switch ($_POST['type']) {
    case 'email':
        $email = $_POST['email'];
        // Check the email existence ...
        $isAvailable = true; // or false
        break;

    case 'username':
    default:
        $username = $_POST['username'];
        // Check the username existence ...
        $isAvailable = true; // or false
        break;
}

// Finally, return a JSON
echo json_encode(array(
    'valid' => $isAvailable,
));

Sending dynamic data

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

<form id="registrationForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-lg-3 control-label">Username</label>
        <div class="col-lg-5">
            <input type="text" class="form-control" name="username" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-lg-3 control-label">Email</label>
        <div class="col-lg-5">
            <input type="text" class="form-control" name="email" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-lg-3 control-label">Password</label>
        <div class="col-lg-5">
            <input type="password" class="form-control" name="password" />
        </div>
    </div>
</form>
$(document).ready(function() {
    $('#registrationForm').bootstrapValidator({
        fields: {
            username: {
                message: 'The username is not valid',
                validators: {
                    remote: {
                        url: '/path/to/backend/',
                        // Send { username: 'its value', email: 'its value' } to the back-end
                        data: function(validator) {
                            return {
                                email: validator.getFieldElements('email').val()
                            };
                        },
                        message: 'The username is not available'
                    }
                }
            },
            email: {
                validators: {
                    remote: {
                        url: '/path/to/backend/',
                        // Send { email: 'its value', username: 'its value' } to the back-end
                        data: function(validator) {
                            return {
                                username: validator.getFieldElements('username').val()
                            };
                        },
                        message: 'The email is not available'
                    }
                }
            }
        }
    });
});

Overriding name

By default, it will be set as the name of field. You can override the name option by using the data-bv-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-bv-remote-name attribute and the back-end will get the same data key.

<!-- In the signup form, the email address field is named as "login" -->
<form id="signupForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-lg-3 control-label">Email</label>
        <div class="col-lg-5">
            <input type="text" class="form-control" name="login" data-bv-remote-name="email" />
        </div>
    </div>
</form>
<!-- In the edit profile form, the email address field is named as "email" -->
<form id="profileForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-lg-3 control-label">Email</label>
        <div class="col-lg-5">
            <input type="text" class="form-control" name="email" data-bv-remote-name="email" />
        </div>
    </div>
</form>

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-bv-remote-name attribute for these email address fields.

<form id="profileForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-lg-3 control-label">Primary email</label>
        <div class="col-lg-5">
            <input type="text" class="form-control"
                name="primary_email" data-bv-remote-name="email" />
        </div>

        <label class="col-lg-3 control-label">Secondary email</label>
        <div class="col-lg-5">
            <input type="text" class="form-control"
                name="secondary_email" data-bv-remote-name="email" />
        </div>
    </div>
</form>