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
  • HTML
    • options
    		 object settings for Captcha

    Example

  • HTML
    • <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

  • HTML
    • <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

  • HTML
    • <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

  • HTML
    • <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

  • HTML
    • <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

  • HTML
    • <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

  • HTML
    • <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

  • HTML
    • <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

  • HTML
    • <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

  • HTML
    • <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

  • HTML
    • <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

  • HTML
    • <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

  • HTML
    • <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

  • HTML
    • <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

  • HTML
    • <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

  • HTML
    • <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

  • HTML
    • <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

  • HTML
    • <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

  • HTML
    • <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

  • HTML
    • <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

  • HTML
    • <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

  • HTML
    • <div id="captcha1"></div> 
 
<script>
//Refresh success event of Captcha control 
        $("#captcha1").ejCaptcha({  
                                refreshSuccess: function(args) {}
                                });     
</script>