ejCaptcha
11 Jul 201820 minutes to read
Captcha is a popular technique that is used to prevent computer programs from sending automated requests and is used for meta-searching search engines, performing dictionary attacks in login pages, or sending spam by using mail servers. Captcha is validated at the time of form submission.
$(element).ejCaptcha(options)
Name | Type | Description |
---|---|---|
|
object | settings for Captcha |
Example
<div id="captcha1"></div>
<script>
// Create Captcha
$('#Captcha1').ejCaptcha();
</script>
Requires
-
module:jQuery
-
module:ej.core.js
-
module:ej.captcha.js
-
module:ej.button.js
Members
characterSet string
Specifies the character set of the Captcha that will be used to generate captcha text randomly.
Default Value:
- “abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789”
Example
<div id="captcha1"></div>
<script>
//To set character set API value during initialization
$("#captcha1").ejCaptcha({ characterSet: "ABCD1234"});
</script>
customErrorMessage string
Specifies the error message to be displayed when the Captcha mismatch.
Default Value:
- null
Example
<div id="captcha1"></div>
<script>
//To set error message API value during initialization
$("#captcha1").ejCaptcha({ customErrorMessage: "InValid Captcha"});
</script>
enableAutoValidation boolean
Set the Captcha validation automatically.
Default Value:
- false
Example
<div id="captcha1"></div>
<script>
//To set auto validation API value during initialization
$("#captcha1").ejCaptcha({ enableAutoValidation: true});
</script>
enableCaseSensitivity boolean
Specifies the case sensitivity for the characters typed in the Captcha.
Default Value:
- true
Example
<div id="captcha1"></div>
<script>
//To set case sensitivity API value during initialization
$("#captcha1").ejCaptcha({ enableCaseSensitivity: true});
</script>
enablePattern boolean
Specifies the background patterns for the Captcha.
Default Value:
- true
Example
<div id="captcha1"></div>
<script>
//To set target input API value during initialization
$("#captcha1").ejCaptcha({ enablePattern: true});
</script>
enableRTL boolean
Sets the Captcha direction as right to left alignment.
Default Value:
- false
Example
<div id="captcha1"></div>
<script>
//To set enable RTL API value during initialization
$("#captcha1").ejCaptcha({ enableRTL: true});
</script>
hatchStyle enum
Specifies the background appearance for the captcha.
Name | Description |
---|---|
None | Set background as None to Captcha |
BackwardDiagonal | Set background as BackwardDiagonal to Captcha |
Cross | Set background as Cross to Captcha |
DarkDownwardDiagonal | Set background as DarkDownwardDiagonal to Captcha |
DarkHorizontal | Set background as DarkHorizontal to Captcha |
DarkUpwardDiagonal | Set background as DarkUpwardDiagonal to Captcha |
DarkVertical | Set background as DarkVertical to Captcha |
DashedDownwardDiagonal | Set background as DashedDownwardDiagonal to Captcha |
DashedHorizontal | Set background as DashedHorizontal to Captcha |
DashedUpwardDiagonal | Set background as DashedUpwardDiagonal to Captcha |
DashedVertical | Set background as DashedVertical to Captcha |
DiagonalBrick | Set background as DiagonalBrick to Captcha |
DiagonalCross | Set background as DiagonalCross to Captcha |
Divot | Set background as Divot to Captcha |
DottedDiamond | Set background as DottedDiamond to Captcha |
DottedGrid | Set background as DottedGrid to Captcha |
ForwardDiagonal | Set background as ForwardDiagonal to Captcha |
Horizontal | Set background as Horizontal to Captcha |
HorizontalBrick | Set background as HorizontalBrick to Captcha |
LargeCheckerBoard | Set background as LargeCheckerBoard to Captcha |
LargeConfetti | Set background as LargeConfetti to Captcha |
LargeGrid | Set background as LargeGrid to Captcha |
LightDownwardDiagonal | Set background as LightDownwardDiagonal to Captcha |
LightHorizontal | Set background as LightHorizontal to Captcha |
LightUpwardDiagonal | Set background as LightUpwardDiagonal to Captcha |
LightVertical | Set background as LightVertical to Captcha |
Max | Set background as Max to Captcha |
Min | Set background as Min to Captcha |
NarrowHorizontal | Set background as NarrowHorizontal to Captcha |
NarrowVertical | Set background as NarrowVertical to Captcha |
OutlinedDiamond | Set background as OutlinedDiamond to Captcha |
Percent90 | Set background as Percent90 to Captcha |
Wave | Set background as Wave to Captcha |
Weave | Set background as Weave to Captcha |
WideDownwardDiagonal | Set background as WideDownwardDiagonal to Captcha |
WideUpwardDiagonal | Set background as WideUpwardDiagonal to Captcha |
ZigZag | Set background as ZigZag to Captcha |
Default Value:
- value set as BackwardDiagonal
Example
<div id="captcha1"></div>
<script>
//To set mapper API value during initialization
$("#captcha1").ejCaptcha({ hatchStyle: "BackwardDiagonal"});
</script>
height number
Specifies the height of the Captcha.
Default Value:
- 50
Example
<div id="captcha1"></div>
<script>
//To set height API value during initialization
$("#captcha1").ejCaptcha({ height: 50});
</script>
mapper string
Specifies the method with values to be mapped in the Captcha.
Default Value:
- null
Example
<div id="captcha1"></div>
<script>
//To set mapper API value during initialization
$("#captcha1").ejCaptcha({ mapper: "GetCurrentItem"});
</script>
maximumLength number
Specifies the maximum number of characters used in the Captcha.
Default Value:
- 8
Example
<div id="captcha1"></div>
<script>
//To set maximum length API value during initialization
$("#captcha1").ejCaptcha({ maximumLength: 8});
</script>
minimumLength number
Specifies the minimum number of characters used in the Captcha.
Default Value:
- 4
Example
<div id="captcha1"></div>
<script>
//To set minimum length API value during initialization
$("#captcha1").ejCaptcha({ minimumLength: 6});
</script>
requestMapper string
Specifies the method to map values to Captcha.
Default Value:
- null
Example
<div id="captcha1"></div>
<script>
//To set request mapper API value during initialization
$("#captcha1").ejCaptcha({ requestMapper: "GetCurrentItem"});
</script>
showAudioButton boolean
Sets the Captcha with audio support, that enables to dictate the captcha text.
Default Value:
- false
Example
<div id="captcha1"></div>
<script>
//To set enable audio API value during initialization
$("#captcha1").ejCaptcha({ showAudioButton: true});
</script>
showRefreshButton boolean
Sets the Captcha with a refresh button.
Default Value:
- false
Example
<div id="captcha1"></div>
<script>
//To set enable refresh API value during initialization
$("#captcha1").ejCaptcha({ showRefreshButton: true});
</script>
targetButton string
Specifies the target button of the Captcha to validate the entered text and captcha text.
Default Value:
- null
Example
<div id="captcha1"></div>
<button id="button1">Submit</button>
<script>
//To set target button API value during initialization
$("#captcha1").ejCaptcha({ targetButton: "button1"});
</script>
targetInput string
Specifies the target input element that will verify the Captcha.
Default Value:
- null
Example
<div id="captcha1"></div>
<script>
//To set target input API value during initialization
$("#captcha1").ejCaptcha({ targetInput: "input1"});
</script>
width number
Specifies the width of the Captcha.
Default Value:
- 150
Example
<div id="captcha1"></div>
<script>
//To set width API value during initialization
$("#captcha1").ejCaptcha({ width: 150});
</script>
Events
refreshBegin
Fires when captcha refresh begins.
Name | Type | Description |
---|---|---|
cancel | boolean | if the event should be canceled; otherwise, false. |
model | object | returns the Captcha model |
type | string | returns the name of the event |
Example
<div id="captcha1"></div>
<script>
//Refresh begin event of Captcha control
$("#captcha1").ejCaptcha({
refreshBegin: function(args) {}
});
</script>
refreshComplete
Fires after captcha refresh completed.
Name | Type | Description |
---|---|---|
cancel | boolean | if the event should be canceled; otherwise, false. |
model | object | returns the Captcha model |
type | string | returns the name of the event |
Example
<div id="captcha1"></div>
<script>
//Refresh complete event of Captcha control
$("#captcha1").ejCaptcha({
refreshComplete: function(args) {}
});
</script>
refreshFailure
Fires when captcha refresh fails to load.
Name | Type | Description |
---|---|---|
cancel | boolean | if the event should be canceled; otherwise, false. |
model | object | returns the Captcha model |
type | string | returns the name of the event |
Example
<div id="captcha1"></div>
<script>
//Refresh failure event of Captcha control
$("#captcha1").ejCaptcha({
refreshFailure: function(args) {}
});
</script>
refreshSuccess
Fires after captcha refresh succeeded.
Name | Type | Description |
---|---|---|
cancel | boolean | if the event should be canceled; otherwise, false. |
model | object | returns the Captcha model |
type | string | returns the name of the event |
Example
<div id="captcha1"></div>
<script>
//Refresh success event of Captcha control
$("#captcha1").ejCaptcha({
refreshSuccess: function(args) {}
});
</script>