Validators / remote

Edit on Github

Perform remote checking via Ajax request.

Option Equivalent HTML attribute Type Description
message data-bv-remote-message String The error message
url (*) data-bv-remote-url String The remote URL that responses an encoded JSON of array containing the valid key
name data-bv-remote-name String The name of field which need to validate
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.

Example

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">
    <! -- Other fields -->

    <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>
<script>
$(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/'
                    }
                }
            }
        }
    });
});
</script>
<?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,
));

If you want to send more data to the back-end, see the data option section.

name option

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.

Use different name for same field on different forms:

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:

<!-- Signup form -->
<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>

<!-- Edit profile form -->
<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>

Multiple fields using the same back-end URL to validate

<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>

data option

As you see in the example at the top of page, the validator will send { fieldName: fieldValue } to the back-end, where fieldName and fieldValue are replaced with the field name and current value, respectively.

In fact, you might want to send more data to the back-end.

All additional data are static:

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">
    <! -- Other fields -->

    <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>
<script>
$(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'
                        }
                    }
                }
            }
        }
    });
});
</script>
<?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,
));

Send more fields with dynamic values to the back-end:

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>
<script>
$(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'
                    }
                }
            }
        }
    });
});
</script>

Comments

If you want to report a bug, please submit the issue on Github. Do NOT post the issue here.

For a general question or feedback, use the form below.