Recaptcha3Token plugin
Send the Google reCAPTCHA v3 token to the back-end when the form is valid
Use the
Recaptcha3 plugin if you want to verify the Google reCAPTCHA v3 token
Usage
To use it, you need to register a site and secret keys at
reCaptcha admin page.
The following piece of code is the starting point to use the Recaptcha3Token plugin:
<html>
<head>
<link rel="stylesheet" href="/vendors/@form-validation/umd/styles/index.min.css" />
</head>
<body>
<form id="demoForm" method="POST">...</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
<script src="/vendors/@form-validation/umd/bundle/popular.min.js"></script>
<script src="/vendors/@form-validation/umd/plugin-recaptcha3-token/index.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(e) {
FormValidation.formValidation(
document.getElementById('demoForm'),
{
fields: {
...
},
plugins: {
...,
recaptcha3Token: new FormValidation.plugins.Recaptcha3Token({
action: ...,
hiddenTokenName: ...,
language: ...,
siteKey: ...,
}),
},
}
);
});
</script>
</body>
</html>
The sample code above assumes that the FormValidation files are placed inside the vendors directory. You might need to change the path depending on where you place them on the server.
Options
(* denotes a required parameter)
| Option | Type | Description |
|---|
action * | String | The page action |
hiddenTokenName * | String | The name of hidden token input generated by Google reCAPTCHA v3 |
language | String | The language code defined by reCAPTCHA |
siteKey * | String | The site key provided by Google |
Using the npm packages
If you are using a bundler such as
Webpack,
Rollup,
Parcel or
Vite, etc., to bundle
your application, then it's recommended to use the FormValidation NPM packages.
$ npm install @form-validation/bundle
$ npm install @form-validation/plugin-recaptcha3-token
- Import and use the Recaptcha3Token plugin:
import { formValidation } from '@form-validation/bundle/popular';
import { Recaptcha3Token } from '@form-validation/plugin-recaptcha3-token';
formValidation(
document.getElementById('demoForm'),
{
fields: {
...
},
plugins: {
recaptcha3Token: new Recaptcha3Token({
...
}),
...
},
}
);
Changelog
- Add the npm package
- Clear loaded callback after uninstalling
- First release. It means that the Recaptcha3Token plugin requires FormValidation v1.7.0 or newer