convalida form con Ajax e captcha

**balacche4** · 12-10-2015, 15:02

Salve a tutti,
ho il seguente problema:
Ho un form per la registrazione al sito a cui ho aggiunto un controllo captcha.

Il problema è che quando effettuo la chiamata ajax non verifica che la stringa inserita sia corretta ma effettua sempre il submit del form.

di seguito il codice:

registrazione.php

codice:

<?php
session_start();
include("./include/config.php");
include("./include/funzioni.php");


connPDO();
$javascriptvariabi = "";
?>

<html>
<head>
<title>REGISTRAZIONE</title>
<link rel="stylesheet" type="text/css" href="css/style.css" >
<meta charset="utf-8">
<script type="text/javascript" src="./js/funzioniJS.js"></script>
<script type="text/javascript" src="./js/validation.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/captcha.js"></script>
</head>

<body>
<?php 
echo "<p align=\"center\">REGISTRAZIONE</p>";
?>
<div class="wrap_all">
<div class="banner"><?php include('./include/banner.php'); ?></div>
    
    <div class="content">
    
    
    <form id="formregistrazione" name="formregistrazione" action="registrautente.php" method="post" onSubmit="validate(); return returnVal;">

<p align="center">
<table width="800" height="50" border="1" align="center">

<tr>
<td width="200">NOME:</td>
<td width="200">
<input type="text" id="nome" name="nome" size="60" value="" placeholder="Nome" autofocus required/>
</td>
</tr>
<tr>

<td>COGNOME:</td>
<td>
<input type="text" id="cognome" name="cognome" size="60" value="" placeholder="Cognome" autofocus required/>
</td>
</tr>

<td>SESSO:</td>
<td>
<select name="sesso_select" placeholder="Selezionare il Sesso" autofocus required>
<option value="">  </option>
<option value="M"> M </option>
<option value="F"> F </option>
</select>
</td>
</tr>


<td>DATA DI NASCITA: (gg/mm/aaaa)</td>
<td>
<input type="text" id="dataNascita" name="dataNascita" size="60" value="" onchange="javascript:sistemadata(document.getElementById('dataNascita'));" placeholder="gg/mm/aaaa" autofocus required/>
<?php 
$javascriptvariabi .= "\ndefine('dataNascita','data','Data di Nascita');  // richiesto\n";
?>

</td>
</tr>

<td>NAZIONALITA':</td>
<td>
<?php 
getSelectNazionalita("nazionalita_select");
?>
</td>
</tr>

<tr>
<td>EMAIL:</td>
<td>
<input type="text" id="email" name="email" size="60" value="" placeholder="E-Mail" autofocus required/>
<?php 
$javascriptvariabi .= "\ndefine('email','email','Email');  // richiesto\n";
?>
</td>
</tr>

<tr>
<td>PASSWORD:</td>
<td>
<input type="password" id="password" name="password" size="60" value="" placeholder="password" autofocus required/>
</td>
</tr>

<tr>
<td>RIPETI PASSWORD:</td>
<td>
<input type="password" name="password2" size="60" value="" onchange="javascript:validazpass(document.formregistrazione.password.value, document.formregistrazione.password2.value);" placeholder="Ripeti Password" autofocus required/>
</td>
</tr>

<tr>
<td>MADRELINGUA:</td>
<td>
<?php 
getSelectLingue("madrelingua_sel"); 
?>
</td>
</tr>

<tr>
<td>LINGUA DA STUDIARE:</td>
<td>
<?php 
getSelectLingue("lingdastudiare_sel"); 
?>
&nbsp LIVELLO: &nbsp
<?php 
getSelectLivello("liv_lingdastudiare_sel"); 
?>
</td>
</tr>

<tr>
<td>CARICA IMMAGINE:</td>
<td>
<input type="file" name="user_file" />
<input type="hidden" name="action" value="upload" />
</td>

<tr>
<td>INSERISCI TESTO DELL'IMMAGINE:</td>
<td>
<div id="imgdiv"><img id="img" src="captcha.php" /></div>
<img id="reload" src="./images/reload.png" />
<input id="captcha1" name="captcha" type="text" placeholder="captcha" autofocus required>
<label id="labelCaptcha"></label>
</td>
</td>

</table>
</p>
<p align="center">
<input type='hidden' name='post_nome' value='<?php echo $_POST['nome']; ?>' />
<input type='hidden' name='post_cognome' value='<?php echo $_POST['cognome']; ?>' />
<input type='hidden' name='post_sesso' value='<?php echo $_POST['sesso_select']; ?>' />
<input type='hidden' name='post_dataNascita' value='<?php echo $_POST['dataNascita']; ?>' />
<input type='hidden' name='post_naz' value='<?php echo $_POST['nazionalita_select']; ?>' />
<input type='hidden' name='post_email' value='<?php echo $_POST['email']; ?>' />
<input type='hidden' name='post_pass' value='<?php echo $_POST['password']; ?>' />
<input type='hidden' name='post_pass2' value='<?php echo $_POST['madrelingua_sel']; ?>' />
<input type='hidden' name='post_pass2' value='<?php echo $_POST['lingdastudiare_sel']; ?>' />
<input type='hidden' name='post_pass2' value='<?php echo $_POST['liv_lingdastudiare_sel']; ?>' />
<!--  
<input id="Registra" type="submit" onclick="javascript:init();" value="Registra" name="Registra">
</p>
</form>
    </div>    
    <div class="footer"></div>
    </div>    
    
<script>
function init(){
var errorDetected = false;
var errorMsg = "";
checkObjects.length = 0;


       <?php
           echo $javascriptvariabi;
        ?>
}
</script>
</body>
</html>

captcha.js

codice:

$(document).ready(function() {
//change CAPTCHA on each click or on refreshing page
    $("#reload").click(function() {
    
        $("img#img").remove();
        var id = Math.random();
        $('<img id="img" src="captcha.php?id='+id+'"/>').appendTo("#imgdiv");
         id ='';
    });

  //validation function
    $('#button').click(function() {
       
        var captcha = $("#captcha1").val();

           //validating CAPTCHA with user input text
            var dataString = 'captcha=' + captcha;
            
          $.ajax({
                type: "POST",
                url: "verificacaptcha.php",
                data: dataString,
           success: function(html)
          {
              $("#labelCaptcha").html(html); 
          },
          error: function()
          {
              $("#labelCaptcha").html(html); 
          }
            });
          return false;
    });
});

captcha.php

codice:

<?php
session_start();

$_SESSION["code"] = "";
//Initializing PHP variable with string
$captchanumber = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890abcdefghijklmnopqrstuvwxyz';

//Getting first 6 word after shuffle
$captchanumber = substr(str_shuffle($captchanumber), 0, 6);

//Initializing session variable with above generated sub-string
$_SESSION["code"] = $captchanumber;

//Generating CAPTCHA
$image = imagecreatefromjpeg("./images/bj.jpg");
$foreground = imagecolorallocate($image, 175, 199, 200); //font color
imagestring($image, 5, 45, 8, $captchanumber, $foreground);
header('Content-type: image/png');
imagepng($image);
?>

verificacaptcha.php

codice:

<?php
session_start();
if ($_SESSION["code"] == $_POST["captcha"]) {
    echo "ok";
} else {
    die("ERRORE! Wrong TEXT Entered");
}
?>

In pratica, quando clicco sul tasto REGISTRA, vorrei che il sistema prima controlla il captcha se è corretto tramite AJAX, se è corretto allora poi deve controllare i dati insieriti nel form tramite la funziona javascript init().

Invece se non inserisco nulla nell'imput del captcha mi da correttamente errore perchè richiesto, se invece inserisco anche solo 1 lettera o cmq un testo non uguale al captcha allora parte il submit senza controllo del captcha.

Grazie mille per il supporto.
Marco

Discussione: convalida form con Ajax e captcha

Strumenti discussione

Ricerca discussione

Visualizza

convalida form con Ajax e captcha

Permessi di invio