'Captcha with jQuery Validation plugin

I'm using the famous jQuery Validation plugin and i want to implement the captcha control. On their page in the demos section there's that but it seems to has an issue: when you click the image to refresh, it doesn't refresh! It's a famous plugin, so I've not posted codes because are many php files, and maybe many of you already know the solution. If needed I will try to post them. Thanks

EDIT

// index

<?php

// Make the page validate
ini_set('session.use_trans_sid', '0');

// Include the random string file
require 'js/captcha/rand.php';

// Begin the session
session_start();

// Set the session contents
$_SESSION['captcha_id'] = $str;

?>
<form id="form">
             <div id="captchaimage">
                <a href="" id="refreshimg" title="Click to refresh image">
                    <img src="js/captcha/images/image.php?<?php echo time(); ?>" width="132" height="46" alt="Captcha image" />
                </a>
             </div>
             <label for="captcha">insert captcha:</label>
             <input type="text" maxlength="6" name="captcha" id="captcha" />

// newsession.php

<?php

// Include the random string file
require 'js/captcha/rand.php';

// Begin a new session
session_start();

// Set the session contents
$_SESSION['captcha_id'] = $str;

?>

// process.php

<?php

// Begin the session
session_start();

// To avoid case conflicts, make the input uppercase and check against the session value
// If it's correct, echo '1' as a string
if(strtoupper($_GET['captcha']) == $_SESSION['captcha_id'])
    echo 'true';
// Else echo '0' as a string
else
    echo 'false';

?>

// rand.php

<?php

// Create a random string, leaving out 'o' to avoid confusion with '0'
$char = strtoupper(substr(str_shuffle('abcdefghjkmnpqrstuvwxyz'), 0, 4));

// Concatenate the random string onto the random numbers
// The font 'Anorexia' doesn't have a character for '8', so the numbers will only go up to 7
// '0' is left out to avoid confusion with 'O'
$str = rand(1, 7) . rand(1, 7) . $char;

?>

//Validation

$("#form").validate({  
    rules: {

        'captcha':{
            required: true,
            remote: "js/captcha/process.php"
        }
    },

    messages: {
        'captcha': "error"  
    },

    onkeyup: false
});

// script refresh captcha

$(function(){
    $("#refreshimg").click(function(){
        $.post('js/captcha/newsession.php');
        $("#captchaimage").load('js/captcha/image_req.php');
        return false;
    });
});

// image_req.php

<?php

// Echo the image - timestamp appended to prevent caching
echo '<a href="" onclick="refreshimg(); return false;" title="Click to refresh image">
        <img src="js/captcha/images/image.php?' . time() . '" width="132" height="46" alt="Captcha image" />
      </a>';

?>

Solution 1:^[1]

<html>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
.good {color: green;}
.bad {color: red;}
#captcha {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
</style>
<?php
function background($length = 6) {
$characters = "ABCDEF0123456789";
$string = "#";
for ($p = 0; $p < $length; $p++) {
$string .= $characters[mt_rand(0, strlen($characters) - 1)];}
return $string;
}
$f = background();
function signs($length = 6) {
$characters = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnoprstuvwxyz";
$string = "";
for ($p = 0; $p < $length; $p++) {
$string .= $characters[mt_rand(0, strlen($characters) - 1)];}
return $string;
}
$a = signs();
?>
<script>
$(function() {       //run when the document's ready, elements are loaded
$("#refresh").click(function() { 
$("#captcha").load(location.href + " #captcha");               
});
});   
</script>
<script>
$(function() {  
$("#send").click(function(evt) {
if ($('#check').val() === $('#verify').val()) {
$("#result").html("<h3 class='good'>Correct</h3>");
evt.preventDefault();
} else {
$("#result").html("<h3 class='bad'>Incorrect</h3>");
evt.preventDefault();
}
});
});   
</script>
<head>
<h1>Captcha all in one</h1>
<hr />
</head>
<body>
<div id="captcha" style="height: 50px; width: 125px; background-color: <?php echo        $f;   ?>"><font face="OCRB" style="font-size: xx-large;" color="<?php echo $a;  ?>">
<p id="secimage"><?php echo $a; ?></p></font><input type="text" id="check" value="<?php echo $a; ?>" style="display: none;"/></div>
<button id="refresh">&uarr;&darr;</button>
<input id="verify" type="text" placeholder="Enter code" />
<button id="send">Check</button>
<div id="result"></div>
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	ArtÅ«rs ZaluÅ¾inskis

'Captcha with jQuery Validation plugin

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]