validate captcha when form submit using ajax and php - php

Question

how can i validate if the user has enter the right captcha using ajax? and prevent the form submission if $_POST['captchainput'] != $_SESSION['code'].
this is the markup
<form action="captchaccept.php" method="POST" name="maincontact">
<input type="text" placeholder="Please enter the code" autocomplete="off" id="captchainput" name="captchainput">
<img src="captcha.php" id="captchaimage">
</form>
captcha.php
`
session_start();
$image_width = 135;
$image_height = 30;
$characters_on_image = 8;
$font = 'captchafont/acmesa.ttf';
$possible_letters = '23456789abcdfghjkmnpqrstvwxyz';
$random_dots = 10;
$random_lines = 30;
$captcha_text_color="0x142864";
$captcha_noice_color = "0x142864";
$code = '';
$i = 0;
while ($i < $characters_on_image) {
$code .= substr($possible_letters, mt_rand(0, strlen($possible_letters)-1), 1);
$i++;
}
$_SESSION['code'] = $code;
$font_size = 14;
$image = #imagecreate($image_width, $image_height);
$background_color = imagecolorallocate($image, 255, 255, 255);
$arr_text_color = hexrgb($captcha_text_color);
$text_color = imagecolorallocate($image, $arr_text_color['red'],
$arr_text_color['green'], $arr_text_color['blue']);
$arr_noice_color = hexrgb($captcha_noice_color);
$image_noise_color = imagecolorallocate($image, $arr_noice_color['red'],
$arr_noice_color['green'], $arr_noice_color['blue']);
for( $i=0; $i<$random_dots; $i++ ) {
imagefilledellipse($image, mt_rand(0,$image_width),
mt_rand(0,$image_height), 2, 3, $image_noise_color);
}
$textbox = imagettfbbox($font_size, 0, $font, $_SESSION['code']);
$x = ($image_width - $textbox[4])/2;
$y = ($image_height - $textbox[5])/2;
imagettftext($image, $font_size, 0, $x, $y, $text_color, $font , $_SESSION['code']);
header('Content-Type: image/jpeg');
imagejpeg($image);
imagedestroy($image);
function hexrgb ($hexstr) {
$int = hexdec($hexstr);
return array( "red" => 0xFF & ($int >> 0x10),
"green" => 0xFF & ($int >> 0x8),
"blue" => 0xFF & $int);
}`
captchaaccept.php
`
session_start();
if(isset($_SESSION['code'])) {
if(empty($_POST['captchainput']) === false) {
if($_SESSION['code'] === $_POST['captchainput']) {
echo 'ok';
}
}
}`
can someone teach me how to use ajax validation for this captcha? or just show me an example , thanks in advance :)

Answer 1

Using jQuery you can do it like this:
(function($) {
$('#captchainput').on('submit', function(e) {
// Prevent the browser submitting the form
e.preventDefault();
// Put the form in variable form
var form = $(this);
// Do a AJAX post with the form data and check the response
$.post(form.attr('action'), form.serialize(), function(data) {
if(data === 'ok') {
// Captcha passed!
} else {
// Captcha failed!
}
});
});
})(jQuery);
Also in your code;
<form action="captchaccept.php" ... should be
<form action="captchaaccept.php" ... I think ;-)

Answer 2

Try this one also...
var posted_captcha = $( "#captchainput" ).val();
$.ajax({
url : 'captchaaccept.php',
data : 'captchainput=' + posted_captcha,
type : 'post',
success: function (res) {
if(res=='ok'){
alert('Validation pass');
}else{
alert('Validation fail');
}
}
});