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

reCaptcha1 add-on

Add and validate Google reCAPTCHA v1

← Add-ons

This add-on adds and validates Google reCAPTCHA v1 element.

You should use the recaptcha2 add-on which supports Google reCAPTCHA v2

Follow these steps to use this add-on:

Registering keys

You need to register a site and secret keys at https://www.google.com/recaptcha/admin

Including the add-on

Download reCaptcha1 add-on
Include reCaptcha1.min.js (located in the dist directory) to your page. Ensure that it's placed after formValidation(.min).js

<!-- FormValidation plugin -->
<script src="/vendor/formvalidation/dist/js/formValidation.min.js"></script>

<!-- Add-ons. You should place it inside /vendor/formvalidation/dist/js/addons directory -->
<script src="/vendor/formvalidation/dist/js/addons/reCaptcha1.min.js"></script>

<!-- Including reCaptcha provided by Google -->
<script src="//www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>

Calling the add-on

It's possible to call the add-on in both programmatic and declarative ways:

Programmatic code
Declarative code

$('#signUpForm').formValidation({
    framework: '...',
    icon: {
        ...
    },
    addOns: {
        reCaptcha1: {
            element: 'captchaContainer',
            theme: 'red',
            siteKey: '6LdgOwETAAAAALA9auuNVKFeXizXcYFrKOVC_vs-',
            url: '/path/to/server/verifier/',
            message: 'The captcha is not valid'
        }
    },
    fields: {
        ...
    }
});

If you want to use multiple add-ons, just simply separate them by a comma in data-fv-addons attribute:

data-fv-addons="i18n, mandatoryIcon, recaptcha1"

<form id="signUpForm" method="post" class="form-horizontal"
    data-fv-addons="reCaptcha1"
    data-fv-addons-recaptcha1-element="captchaContainer"
    data-fv-addons-recaptcha1-theme="red"
    data-fv-addons-recaptcha1-sitekey="6LdgOwETAAAAALA9auuNVKFeXizXcYFrKOVC_vs-"
    data-fv-addons-recaptcha1-url="/path/to/server/verifier/"
    data-fv-addons-recaptcha1-message="The captcha is not valid">
    ...
</form>

The reCaptcha1 add-on provides the following options:

^* — Required option

Option	HTML attribute	Type	Description
`element`^*	`data-fv-addons-recaptcha1-element`	`String`	The ID of element showing the captcha
`message`^*	`data-fv-addons-recaptcha1-message`	`String`	The error message that will be shown in case the captcha is not valid. You don't need to define it if the back-end URL above returns the message
`siteKey`^*	`data-fv-addons-recaptcha1-sitekey`	`String`	The site key provided by Google
`theme`	`data-fv-addons-recaptcha1-theme`	`String`	The theme name provided by Google. It can be one of red default white blackglass clean
`url`^*	`data-fv-addons-recaptcha1-url`	`String`	The URL that verify the captcha. It takes `recaptcha_challenge_field` and `recaptcha_response_field` parameters and responses an encoded JSON string with valid and message keys: `{ "valid": true or false, "message": The error message }`

Verifying the captcha on server

After clicking the Submit button, the add-on will send two parameters named recaptcha_challenge_field and recaptcha_response_field to server defined by the url option.

The server must response an encoded JSON string containing the valid (required) and message (optional) keys.

The following code snippet shows a basic usage of validating captcha with reCAPTCHA PHP library:

<?php
// Register the public and private keys at https://www.google.com/recaptcha/admin
define('SITE_KEY',   '6LdgOwETAAAAALA9auuNVKFeXizXcYFrKOVC_vs-');
define('SECRET_KEY', '6LdgOwETAAAAAAHEd6l5XR5JOkBJDgUS4BPqxQrk');

// Download recaptcha lib for PHP from http://code.google.com/p/recaptcha/downloads/list
require_once('recaptchalib.php');

// Verify the captcha
// https://developers.google.com/recaptcha/docs/verify
$resp = recaptcha_check_answer(SECRET_KEY,
                                $_SERVER['REMOTE_ADDR'],
                                $_POST['recaptcha_challenge_field'],
                                $_POST['recaptcha_response_field']
                            );
echo json_encode(array(
    'valid'   => $resp->is_valid,
    'message' => $resp->is_valid ? null : 'Hey, the captcha is wrong!',       // $resp->error,
));

Example

Below is the piece of code showing programmatic and declarative usages:

For testing purpose, the back-end used in the example always responses that the captcha is invalid

<!-- Include FormValidation files first -->

<!-- Then include reCaptcha1 add-on -->
<script src="/vendor/formvalidation/js/addons/reCaptcha1.min.js"></script>

<!-- Google reCaptcha v1 -->
<script src="//www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>

<form id="signUpForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Username</label>
        <div class="col-xs-6">
            <input type="text" class="form-control" name="username" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Email address</label>
        <div class="col-xs-6">
            <input type="text" class="form-control" name="email" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Password</label>
        <div class="col-xs-6">
            <input type="password" class="form-control" name="password" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Captcha</label>
        <div class="col-xs-8">
            <!-- The captcha container -->
            <div id="captchaContainer"></div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-5 col-xs-offset-3">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </div>
</form>

<script type="text/javascript">
$(document).ready(function() {
    $('#signUpForm').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        addOns: {
            reCaptcha1: {
                element: 'captchaContainer',
                theme: 'red',
                siteKey: '6LdgOwETAAAAALA9auuNVKFeXizXcYFrKOVC_vs-',
                url: 'http://echo.jsontest.com/valid/false/',
                message: 'The captcha is not valid'
            }
        },
        fields: {
            username: {
                validators: {
                    notEmpty: {
                        message: 'The username is required'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 6 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: 'The username can only consist of alphabetical, number, dot and underscore'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'The email address is required'
                    },
                    emailAddress: {
                        message: 'The input is not a valid email address'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 'The password is required'
                    },
                    different: {
                        field: 'username',
                        message: 'The password cannot be the same as username'
                    }
                }
            }
        }
    });
});
</script>

<!-- FormValidation plugin and the class supports validating Bootstrap form -->
<script src="/vendor/formvalidation/dist/js/formValidation.min.js"></script>
<script src="/vendor/formvalidation/dist/js/framework/bootstrap.min.js"></script>

<!-- reCaptcha1 add-on -->
<script src="/vendor/formvalidation/dist/js/addons/reCaptcha1.min.js"></script>

<!-- Google reCaptcha v1 -->
<script src="//www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>

<form id="signUpForm" method="post" class="form-horizontal"
    data-fv-addons="reCaptcha1"
    data-fv-addons-recaptcha1-element="captchaContainer"
    data-fv-addons-recaptcha1-theme="red"
    data-fv-addons-recaptcha1-sitekey="6LdgOwETAAAAALA9auuNVKFeXizXcYFrKOVC_vs-"
    data-fv-addons-recaptcha1-url="/path/to/server/verifier/"
    data-fv-addons-recaptcha1-message="The captcha is not valid"

    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">Username</label>
        <div class="col-xs-6">
            <input type="text" class="form-control" name="username"
                data-fv-notempty="true"
                data-fv-notempty-message="The username is required"

                data-fv-stringlength="true"
                data-fv-stringlength-min="6"
                data-fv-stringlength-max="30"
                data-fv-stringlength-message="The username must be more than 6 and less than 30 characters long"

                data-fv-regexp="true"
                data-fv-regexp-regexp="^[a-zA-Z0-9_\.]+$"
                data-fv-regexp-message="The username can only consist of alphabetical, number, dot and underscore" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Email address</label>
        <div class="col-xs-6">
            <input type="text" class="form-control" name="email"
                data-fv-notempty="true"
                data-fv-notempty-message="The email address is required"

                data-fv-emailaddress="true"
                data-fv-emailaddress-message="The input is not a valid email address" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Password</label>
        <div class="col-xs-6">
            <input type="password" class="form-control" name="password"
                data-fv-notempty="true"
                data-fv-notempty-message="The password is required"

                data-fv-different="true"
                data-fv-different-field="username"
                data-fv-different-message="The password cannot be the same as username" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Captcha</label>
        <div class="col-xs-8">
            <!-- The captcha container -->
            <div id="captchaContainer"></div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-5 col-xs-offset-3">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </div>
</form>

<script type="text/javascript">
$(document).ready(function() {
    $('#signUpForm').formValidation();
});
</script>

Change log

v0.3.0: Add Grunt build and minified files
v0.1.0: First release