I have an application form in which i need to validate captcha using jquery. If the captcha entered is wrong then an alert box as to displayed please enter captcha again the entered captcha is wrong.. How can I do this using jquery ?? Please help me. I'm new to jquery.
Here is the code :
$(function() {
$("#XISubmit").click(function(){
event.preventDefault()
val=$('#vercode').val()
$.ajax({
type:"post",
url:"verify-captcha.php",
data:{'code':val},
success:function(data){
if(data=='false'){
alert('Re-enter Captcha, You Entered wrong captcha code')
$("#cap").html("<img src='captcha_image.php'>"); }
else{
document.getElementById("XIForm").submit();
}
}
});
});
});
document.getElementById("XIForm").submit();
});
**Html page :**
<label>Security Validation</label>
<span><img src="captcha_image.php"></span><input type="text" name="vercode" id="vercode" size="10" style="margin-top: -1px; float: left; width: 115px; margin-right: 12px;"></li><div id="msg"></div>
**captcha_image.php**
<?
// *** CAPTCHA image generation ***
// *** http://frikk.tk ***
session_start();
// *** Tell the browser what kind of file is come'n at 'em! ***
header("Content-Type: image/jpeg");
// *** Send a generated image to the browser ***
die(create_image());
// *** Function List ***
function create_image()
{
// *** Generate a passcode using md5
// (it will be all lowercase hex letters and numbers ***
$md5 = md5(rand(0,9999));
$pass = substr($md5, 10, 5);
// *** Set the session cookie so we know what the passcode is ***
$_SESSION["pass"] = $pass;
// *** Create the image resource ***
$image = ImageCreatetruecolor(100, 20);
// *** We are making two colors, white and black ***
$clr_white = ImageColorAllocate($image, 255, 255, 255);
$clr_black = ImageColorAllocate($image, 0, 0, 0);
// *** Make the background black ***
imagefill($image, 0, 0, $clr_black);
// *** Set the image height and width ***
imagefontheight(15);
imagefontwidth(15);
// *** Add the passcode in white to the image ***
imagestring($image, 5, 30, 3, $pass, $clr_white);
// *** Throw in some lines to trick those cheeky bots! ***
imageline($image, 5, 1, 50, 20, $clr_white);
imageline($image, 60, 1, 96, 20, $clr_white);
// *** Return the newly created image in jpeg format ***
return imagejpeg($image);
// *** Just in case... ***
imagedestroy($image);
}
?>
verify-captcha.php
<?php
session_start();
if ($_POST["code"] != $_SESSION["cap_code"] || $_SESSION["cap_code"]=='') {
echo 'false';
}else{
echo 'true';}
The steps you can to do
Here's your script modified (not tested):
$(function() {
$("#XISubmit").click(function(){
event.preventDefault()
val=$('#vercode').val()
$.ajax({
type:"post",
url:"verify-captcha.php",
data:{'code':val},
success:function(data){
if(data=='false'){
alert('Re-enter Captcha, You Entered wrong captcha code')
$("#cap").html("<img src='captcha.php'>"); }
else{
$("#XIForm").submit();
}
}
});
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.