Getting Started with the Captcha
This guide demonstrates how to get up and running with the Kendo UI for jQuery Captcha.
After the completion of this guide, you will be able to achieve the following end result:
<input id="captcha" name="captcha" placeholder="Enter captcha" />
<script>
$("#captcha").kendoCaptcha({
handler: "./reset",
audioHandler: function (args) {
args.success("./audio?captchaId=" + args.data.captchaId);
},
validationHandler: "./validate",
error: function (data) {
console.log(data);
}
})
</script>
Due to CORS errors, the image and audio URLs for the Captcha cannot be accessed when running the example in the Dojo code runner. For a complete runnable example, check the Captcha Overview demo.
1. Create an Input Element
First, create an <input> element on the page.
<input id="captcha" name="captcha" placeholder="Enter captcha" />
2. Initialize the Captcha
In this step, you will initialize the Captcha from the <input> element. All settings of the Captcha will be provided in the initialization script statement and you have to describe its layout and configuration in JavaScript.
<input id="captcha" name="captcha" placeholder="Enter captcha" />
<script>
// Target the input element by using jQuery and then call the kendoCaptcha() method.
$("#captcha").kendoCaptcha({
error: function (data) {
console.log(data);
}
});
</script>
3. Add the Image Handler
The Captcha generates its image after a request to the server. The link to the remote endpoint is configured through the handler setting.
<input id="captcha" name="captcha" placeholder="Enter captcha" />
<script>
$("#captcha").kendoCaptcha({
error: function (data) {
console.log(data);
},
handler: "./reset",
});
</script>
4. Add the Audio Handler
The Captcha can reproduce the content of its distorted image in audio format through the audioHandler setting.
<input id="captcha" name="captcha" placeholder="Enter captcha" />
<script>
$("#captcha").kendoCaptcha({
error: function (data) {
console.log(data);
},
handler: "./reset",
audioHandler: function (args) {
args.success("./audio?captchaId=" + args.data.captchaId)
}
});
</script>
5. Add the Validation Handler
The validationHandler allows you to configure an URL or an action that validates the user input.
<input id="captcha" name="captcha" placeholder="Enter captcha" />
<script>
$("#captcha").kendoCaptcha({
error: function (data) {
console.log(data);
},
handler: "./reset",
audioHandler: function (args) {
args.success("./audio?captchaId=" + args.data.captchaId)
},
validationHandler: "./validate"
});
</script>