Question

I’m using Joomla jQuery Registration extension which comes without any kind of botcheck feature and I’d like to add it but I don’t know how I’d go about doing that. Here is the extension’s code:

    <?php
/**
 * @title         jQuery Dropdown Registration Module
 * @version   1.7.2
 * @package     Joomla
 * @author      http://www.minitek.gr (Ioannis Maragos)
 * @copyright   Copyright (C) 2011 Minitek. All rights reserved.
 * @license     GNU General Public License version 2 or later.
 */

// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<?php JHTML::_('behavior.formvalidation'); ?>       

<?php /*<link rel="stylesheet" href="modules/mod_dropdown_registration/css/style.css" type="text/css" /> */?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2" type="text/javascript"></script>
<script src="modules/mod_dropdown_registration/js/register.js" type="text/javascript"></script>


<?php
$user = JFactory::getUser();
$myID = $user->id;
if ($myID == 0) {
?>
<div id="registerContainer">
                <a href="#" id="registerButton"><span>Registracija</span><em></em></a>
                <div style="clear:both"></div>
<div id="registerBox"> 

<form id="member-registration" action="<?php echo JRoute::_('index.php?option=com_users'); ?>" method="post" class="form-validate">

<fieldset id="reg-body" class="userdata">       

<div class="reg-field">
    <label for="jform_name" id="jform_name-lbl">
            Ime i prezime:
    </label>
</div>      
<div style="float:left;">
    <input type="text" maxlength="50" class="inputbox required" value="" size="40" id="jform_name" name="jform[name]"/><br/>
    Molimo Vas da unesete stvarno ime i prezime!
</div>

<div style="clear:both;"></div>
<div style="height: 7px;"></div>

<div class="reg-field">
        <label for="jform_username" id="jform_username-lbl">
            Korisničko ime:
        </label>
</div>
<div style="float:left;">
        <input type="text" maxlength="25" class="inputbox required validate-username" value="" size="40" name="jform[username]" id="jform_username"/>
</div>
<div style="clear:both;"></div>

<div class="reg-field">
        <label for="jform_password1" id="jform_password1-lbl">
            Lozinka:
        </label>
</div>
<div style="float:left;">
        <input type="password" value="" size="40" name="jform[password1]" id="jform_password1" class="inputbox required validate-password"/>
</div>
<div style="clear:both;"></div>

<div class="reg-field">
        <label for="jform_password2" id="jform_password2-lbl">
            Potvrdite lozinku:
        </label>
</div>
<div style="float:left;">
        <input type="password" value="" size="40" name="jform[password2]" id="jform_password2" class="inputbox required validate-password"/>
</div>
<div style="clear:both;"></div>

<div class="reg-field">
        <label for="jform_email1" id="jform_email1-lbl">
            E-mail:
        </label>
</div>
<div style="float:left;">
        <input type="text" maxlength="100" class="inputbox required validate-email" value="" size="40" name="jform[email1]" id="jform_email1"/>
</div>
<div style="clear:both;"></div>

<div class="reg-field">
        <label for="jform_email2" id="jform_email2-lbl">
            Potvrdite e-mail:
        </label>
</div>
<div style="float:left;">
        <input type="text" maxlength="100" class="inputbox required validate-email" value="" size="40" name="jform[email2]" id="jform_email2"/>
</div>
<div style="clear:both;"></div>

<br/>
    <font color = "#FF0000">Sva polja su obavezna!</font><br/>

<br/>
    <button type="submit" class="button validate">Registracija</button>
    <input type="hidden" name="option" value="com_users" />
    <input type="hidden" name="task" value="registration.register" />
    <?php echo JHtml::_('form.token');?>

    </fieldset>

</form>

 </div>
</div>
<?php
}
?>

I’m sorry if doesn’t come out as a code block but the instructions are unclear. Anyhow – what I’d like to do is add a text field before the Submit button which will have something like a “What is 3 plus 2” label in front of it, and the submit won’t work if the answer is incorrect. Is there any way to do this without editing Joomla core files?

Answer 1

You could user jQuery to add your label and input elements to the page. Then bind a .click() listener to the submit button that checks the validity of your answer before the form can be submitted. Do not that this is not a very secure bot checking solution. To add an extra level of security you might consider changing the 2 and 3 to two and three and also perhaps alternate between plus, minus, multiply and divide and store the answers and question combos in your Joomla session instead of calculating it all in JS.