<
html
>
<
head
>
<
link
rel
=
"
stylesheet
"
href
=
"
/vendors/formvalidation/dist/css/formValidation.min.css
"
/>
head
>
<
body
>
<
form
id
=
"
demoForm
"
method
=
"
POST
"
>
...
<
div
id
=
"
captchaContainer
"
>
div
>
form
>
<
script
src
=
"
https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js
"
>
script
>
<
script
src
=
"
/vendors/formvalidation/dist/js/FormValidation.min.js
"
>
script
>
<
script
src
=
"
/vendors/formvalidation/dist/js/plugins/Recaptcha.min.js
"
>
script
>
<
script
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
fields
:
{
...
}
,
plugins
:
{
...
,
recaptcha
:
new
FormValidation
.
plugins
.
Recaptcha
(
{
element
:
'captchaContainer'
,
language
:
...
,
message
:
...
,
siteKey
:
...
,
theme
:
...
,
}
)
,
}
,
}
)
;
}
)
;
script
>
body
>
html
>
vendors
directory. You might need to change the path depending on where you place them on the server.
| Option | Type | Description |
|---|---|---|
backendVerificationUrl
|
String
|
The URL of your back-end that verifies the captcha via reCAPTCHA API |
badge
|
String
|
The position of invisible reCAPTCHA |
bottomright
(the default value)
bottomleft
inline
size: 'invisible'
for
invisible reCAPTCHA
| Option | Type | Description |
|---|---|---|
element
*
|
String
|
The ID of element showing the captcha |
language
|
String
|
The defined by reCAPTCHA |
message
*
|
String
|
The invalid message that will be shown in case the captcha is not valid |
siteKey
*
|
String
|
The site key provided by Google |
size
|
String
|
The size of reCAPTCHA widget |
normal
(the default value)
compact
invisible
| Option | Type | Description |
|---|---|---|
theme
|
String
|
The theme name provided by Google |
light
(the default value)
dark
size: 'invisible'
option.
backendVerificationUrl
option to your back-end URL:
FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
fields
:
{
...
}
,
plugins
:
{
...
recaptcha
:
new
FormValidation
.
plugins
.
Recaptcha
(
{
backendVerificationUrl
:
'/path/to/your/back-end/'
,
}
)
,
}
,
}
)
;
g-recaptcha-response
parameter. With the value of captcha and the reCAPTCHA secret key, you can connect to
to verify the captcha.
{
"success"
:
"true"
}
// or
{
"success"
:
"false"
}
<
?
php
// Replace it with your reCAPTCHA secret key
$secretKey
=
'...'
;
// See https://developers.google.com/recaptcha/docs/verify#api-request
$fields
=
array
(
'secret'
=>
$secretKey
,
'response'
=>
$_POST
[
'g-recaptcha-response'
]
)
;
$postVars
=
''
;
$sep
=
''
;
foreach
(
$fields
as
$key
=>
$value
)
{
$postVars
.
=
$sep
.
urlencode
(
$key
)
.
'='
.
urlencode
(
$value
)
;
$sep
=
'&'
;
}
$ch
=
curl_init
(
)
;
curl_setopt
(
$ch
,
CURLOPT_URL
,
'https://www.google.com/recaptcha/api/siteverify'
)
;
curl_setopt
(
$ch
,
CURLOPT_POST
,
count
(
$fields
)
)
;
curl_setopt
(
$ch
,
CURLOPT_POSTFIELDS
,
$postVars
)
;
curl_setopt
(
$ch
,
CURLOPT_RETURNTRANSFER
,
true
)
;
$result
=
curl_exec
(
$ch
)
;
curl_close
(
$ch
)
;
header
(
'Content-Type: application/json'
)
;
echo $result
;
backendVerificationUrl
option to support back-end verification
timeout
option. The captcha expiration will be handled by the plugin automatically
stoken
option