AJAX Captcha

Developer

Laisvunas

3rd Party (Commercial)


EE Version Support

  • ExpressionEngine 1.x
  • ExpressionEngine 2

Compatibility

If an item is crossed out, it might be untested, not applicable or incompatible. Contact the developer to be sure.

  • Updater
  • Multi Site Manager
  • Stand Alone Entry Form
  • Low Variables
  • Content Elements
  • Better Workflow
  • Matrix
  • Grid
  • Webservice
  • Publisher

Requirements

  • jQuery for the Control Panel

Add-On Type(s)

Module

Tags

CAPTCHA implementation capable using AJAX for refreshing and validation. It is based on kCaptcha script which outputs images very usable for humans but hard to decipher for spambots. This add-on has been designed to be fully compatible with AJAX Babble, AJAX Form Validator and AJAX Login.

INSTALLATION FOR EE2.0+

1) Unzip downloaded files.

2) upload the directory “ajaxcaptcha” to /system/expressionengine/third_party on the server.

3) go CP Home > Add-ons > Modules, find “AJAX Captcha” in modules list and click “Install”.
Then click the link “AJAX Captcha”. On the page that will be displayed you will find a form
containing a pair of radio buttons for each channel. Use that form to enable AJAX Captcha for
relevant channels.

4) Check at Control Panel > Admin > Channel Administration > Channels > Edit Preferences > Comment Posting Preferences
which value is set for the option “Enable Captcha for Comment Posting?” In order for AJAX Captcha
add-on to work correctly the value for this option MUST BE “No” FOR EACH channel in which you
need captcha capable of using AJAX.

5) Check at Control Panel > Admin > Security and Privacy > Security and Session Preferences which value
is set for the option “Process form data in Secure Mode?” In order for AJAX Captcha add-on to work
correctly the value for this option MUST BE “No”.

INSTALLATION FOR EE1.x

1) Unzip downloaded files.

2) Copy contents of “modules” directory into system/modules directory on the server.

3) Copy contents of “extensions” directory into system/extensions directory on the server.

4) Copy contents of “language/english” directory into system/language/english directory on the server.

5) Copy contents of “lib” directory into system/lib directory on the server.

6) Go Control Panel >  Admin >  Utilities >  Extensions Manager, find extension “AJAX Captcha”
in the list and click “Enable”.

7) Go Control Panel > Modules, find module “AJAX Captcha” in the list and click “Install”.
Then click the link “AJAX Captcha”. On the page that will be displayed you will find a form
containing a pair of radio buttons for each weblog. Use that form to enable AJAX Captcha for
relevant weblogs.

8) Check at Control Panel > Admin > Weblog Administration > Weblog Management > Edit Preferences > Comment Posting Preferences
which value is set for the option “Enable Captcha for Comment Posting?” In order for AJAX Captcha
add-on to work correctly the value for this option MUST BE “No” FOR EACH weblog in which you
need captcha capable of using AJAX.

9) Check at Control Panel > Admin > System Preferences > Security and Session Preferences which value
is set for the option “Process form data in Secure Mode?” In order for AJAX Captcha add-on to work
correctly the value for this option MUST BE “No”.

THE TAG {exp:ajaxcaptcha}

I. Parameters

1) entry_id - required. Allows you to specify ID number of the entry being
commented on. In case AJAX Captcha add-on is not used inside comment form the
value of this parameter should be “none”.

2) form_id - required. Allows you to specify HTML id attribute of the form
outputted by exp:comment:form tag. Usually its value will be “comment_form”.

3) submit_button_id - required. Allows you to specify HTML id attribute
of the submit button of the comment form.

4) captcha_image_id - required. Allows you to specify HTML id attribute of the
captcha image.

5) captcha_input_name - required. Allows you to specify HTML name attribute of the
text input into which users will type captcha code.

6) captcha_refresh_button_id - optional. Allows you to specify HTML id attribute
of the element which could be clicked in order to refresh captcha image.

7) captcha_refresh_indicator_id - optional. Allows you to specify HTML id attribute
of the element which will act as the indicator of captcha being refreshed.

8) captcha_refresh_indicator_class - optional. Allows you to specify HTML class
attribute of the element which will act as the indicator of captcha being refreshed.

9) submission_process_indicator_id - optional. Allows you to specify HTML id attribute
of the element which will act as the indicator of captcha code being validated.

10) submission_process_indicator_class - optional. Allows you to specify HTML class
attribute of the element which will act as the indicator of captcha code being validated.

11) submission_valid_indicator_id - optional. Allows you to specify HTML id attribute
of the element which will act as the indicator of captcha code being valid.

12) submission_valid_class - optional. Allows you to specify HTML class attribute
of the element which will act as the indicator of captcha code being valid.

13) submission_invalid_indicator_id - optional. Allows you to specify HTML id attribute
of the element which will act as the indicator of captcha code being invalid.

14) submission_invalid_class - optional. Allows you to specify HTML class attribute
of the element which will act as the indicator of captcha code being invalid.

15) validation_start_on - optional. Allows you to specify javascript event which
will trigger captcha code’s validation. Possible values are “keyup”, “blur” and “click”.
“keyup” means that validation will start when user inputs 6 characters.
“blur” means that validation will start when captcha text input will loose focus.
“click” means that validation will start when user will click form’s submit button.

16) validation_show_result_on - optional. Allows you to specify javascript event which
will trigger display of captcha validation result. Possible values are “keyup”, “blur” and “click”.
“keyup” means that captcha validation result will be displayed when user inputs 6 characters.
“blur” means that captcha validation result will be displayed when captcha text input will loose focus.
“click” means that captcha validation result will be displayed when user will click form’s submit button.

17) alert_text - optional. Allows you to specify the text which will be displayed in
case user inputs invalid captcha code.

18) javascript_alert - optional. Possible value is “yes”. “yes” means that the value
of “alert_text” parameter should be displayed inside javascript alert dialog.

19) alert_container_id - optional. Allows you to specify HTML id attribute of the
element inside which the value of “alert_text” parameter should be displayed.

20) alert_container_class - optional. Allows you to specify HTML class attribute of the
element inside which the value of “alert_text” parameter should be displayed.

21) form_submit_ajax - optional. Allows you to specify if the whole form is being submitted by AJAX or
after submitting of the form a page specified as the value of “action” attribute of the form
will be loaded. Possible values are “yes” (form will be submitted by AJAX) and “no” (after submittion the page
specifies as “action” will be loaded). Default value is “yes”.

22) add_callback_validation_success - Optional. Allows you to specify name of javascript function which
will be executed after successful validation of the form fields. This parameter supports pipe operator,
i.e. you can specify several names of javascript functions.

23) add_callback_validation_failure - Optional. Allows you to specify name of javascript function which
will be executed after the failure of the validation of the form fields. This parameter supports pipe operator,
i.e. you can specify several names of javascript functions.

24) add_callback_validation_success_args - Optional. Allows you to specify argument of javascript function which
will be executed after successful validation of the form fields. This parameter supports pipe operator, i.e. you can
specify arguments of several javascript functions. The order of arguments should follow the order of functions in
“add_callback_validation_success” parameter. If some functions should have arguments and other functions shouldn’t,
specify “null” or “0” (without quotation marks) as arguments for the latter.
A special constant ‘triggerSubmitClick’ can be used as the value of this parameter, e.g.

 add_callback_validation_success_args="'triggerSubmitClick'"


This constant means that you need to defer Submit button’s click event until your validation success callback function will finish its work.
To defer click event you will need also to change your validation success callback function this way:

 function my_validation_success_callback(triggerSubmitClick) {
 
 some code
 
 triggerSubmitClick();
 
 }

25) add_callback_validation_failure_args - Optional. Allows you to specify argument of javascript function which
will be executed after the failure of the validation of the form fields. This parameter supports pipe operator, i.e. you can
specify arguments of several javascript functions. The order of arguments should follow the order of functions in
“dd_callback_validation_failure” parameter. If some functions should have arguments and other functions shouldn’t,
specify “null” or “0” (without quotation marks) as arguments for the latter.

26) protect_backslashes - Optional. In some cases parsing of an ExpressionEngine’s teplate results into removal of
the backslashes inside of some tags. This is probably the case if adding exp:ajaxcaptcha tag into template results into javascript errors.
This parameter can have following values “js” (backslashes inside javascript will be protected) and
“tagdata” (backslashes inside tagdata will be protected). This parameter supports pipe operator, i.e. its value can be protect_backslashes=“js|tagdata”

II. The variable {ajaxcaptcha_url}

The variable {ajaxcaptcha_url} outputs HTML src attribute of captcha image.

This variable can be used in conditionals.

USAGE

Template example



<html>
<head>

<title>AJAX Captcha demo simple</title>

<style>
/*AJAX Captcha styles*/

img {
border: 0;
}

div.captchaimage_div {
width: 120px; 
height: 60px; 
border: 1px solid #eee;
}

div.captchaimage_div a:focus { 
outline: none; 
}

div.captchaimage_div img { 
width: 120px; 
height: 60px;
}

div.captcha_refresh { 
background: url('{site_url}images/captcha-loader.gif') no-repeat center; 
}

div.captcha_refresh img { 
display: none;
}

input.invalidated { 
background: #ffbcbc 
}

input.validated { 
background: #bcffbf; 
}

</style>

</head>

<body>

<h1>AJAX Captcha Simple Demo (without other fields of the form)</h1>

<p>
CAPTCHA implementation capable using AJAX for refreshing and validation. It is based on kCaptcha script which outputs images very usable for humans but hard to decipher for spambots.
</p>

<p>
In this example CAPTCHA validation is being done onkeyup and the result of validation is being displayed onkeyup and after clicking Submit button.
</p>

{exp:comment:form entry_id="3056" preview="weblog/preview"}

{exp:ajaxcaptcha entry_id="3056" form_id="comment_form" submit_button_id="submit_button_of_comment_form" captcha_image_id="captcha_image_of_comment_form" captcha_input_name="captcha" captcha_refresh_button_id="captcha_refresh_button_of_comment_form" captcha_refresh_indicator_id="captcha_refresh_indicator_of_comment_form" captcha_refresh_indicator_class="captcha_refresh" submission_valid_indicator_id="captcha_for_comment_form" submission_valid_class="validated" submission_invalid_indicator_id="captcha_for_comment_form" submission_invalid_class="invalidated" validation_start_on="keyup" validation_show_result_on="keyup|click" alert_text="ERROR!\\\nYou did not enter the word exactly as it appears in the image" javascript_alert="yes"}

{if ajaxcaptcha_url}

<p>Enter the characters as seen on the image below; if you can&#39;t decipher the text 
on the image, click it to dynamically generate a new one.</p>

<div><div id="captcha_refresh_indicator_of_comment_form" class="captchaimage_div">
<a id="captcha_refresh_button_of_comment_form" href="{homepage}/{if segment_1}{segment_1}/{/if}{if segment_2}{segment_2}/{/if}{if segment_3}{segment_3}/{/if}" 
title="Click to refresh image"><img id="captcha_image_of_comment_form" src="{ajaxcaptcha_url}" alt="Captcha image" /></a></div></div>

<p class="commentp"><input type="text" maxlength="6" name="captcha" id="captcha_for_comment_form" /></p>

{/if}

{/exp:ajaxcaptcha}

<p><input type="submit" id="submit_button_of_comment_form" name="submit" value="Submit" /></p>

{/exp:comment:form}

</body>
</html>

AJAX Captcha Links

Hooks Used

If the add-on is an extension, and ties into ExpressionEngine's core files, it will use ExpressionEngine hooks. We are listing any hooks the add-on uses for developers to have an easier time locating other add-ons that they can reference for their own work.

  1. insert_comment_end
  2. show_full_control_panel_end

This entry was created October 4, 2010, 11:38 am.
This entry was last updated July 10, 2014, 6:16 pm.

Disclaimer: Information about ExpressionEngine add-ons is provided as a service to you, the user, and every member of the ExpressionEngine community. devot:ee is not responsible if you hose, mangle, wreck, or otherwise destroy your EE website by installing an add-on that you found out about at this site, regardless of its rating, Favorites status, commercial or free status, or general popularity. Caveat EEmptor!

Returns: devot:ee has a 30-day return policy on all commercial add-ons sold through devot-ee.com. If you need to return an add-on, do not go to the developer or the developer's site, but rather visit our returns page at https://devot-ee.com/returns to initiate your return. If you have questions, email support@devot-ee.com.

There are no reviews for this add-on yet.

What are you waiting for? Rate it and review it!