Validazione remota tramite plugin (jquery validate)

[MarcoGrazia]

Salve a tutti scrivo questo snippet anche se più che altro sarà un vademecum per tutti coloro che si sono sbattuti sia sulla scarna documentazione ufficiale, che sulla pochezza degli esempi.

Prima di tutti vediamo di cosa parliamo: validare un form è spesso cosa ostica, specialmente se pieno di campi di qualsiasi tipo.
In questi giorni sto costruendo una pagina con un forma altamente complesso, che prevede pure la presenza di un CAPTCHA.
Per rendere il tutto più organico e semplice mi sono avvalso di un plugin di jquery abbastanza conosciuto, ma purtroppo non molto documentato.

Avevo bisogno di un sistema che rispondesse in remoto e quindi mi sono avvalso del metodo remote di questo plugin:

remote method | jQuery Validation Plugin

Ora nella documentazione online si legge: (tradotta dall'inglese)

opzioni
Tipo: oggetto
Per l'URL della risorsa da richiedere per la convalida lato server (String) o le opzioni per personalizzare completamente la richiesta, vedere jQuery.ajaxper i dettagli.

Queste opzioni estendono in profondità le impostazioni predefinite ( dataType:"json", data:{nameOfTheElement:valueOfTheElement}). Qualsiasi opzione fornita sovrascriverà le impostazioni predefinite.


La risorsa lato server viene chiamata tramite jQuery.ajax (XMLHttpRequest) e ottiene una coppia chiave/valore corrispondente al nome dell'elemento convalidato e al suo valore come parametro GET. La risposta serverside deve essere una stringa JSON che deve essere "true"per gli elementi validi, e può essere "false", undefined o null per gli elementi non validi, usando il messaggio di errore predefinito. Se la risposta lato server è una stringa, ad es. "Il nome Pietro123 è già presente provane un altro", questa stringa verrà visualizzata come messaggio di errore personalizzato al posto di quello predefinito.

Da cui si comprende che la risposta deve essere: true, per passare il test, oppure false, null, undefined per una risposta negativa che non passa il test, o anche una frase di testo che verrà riportata come promemoria con il test fallito.

Tutto bene? Non proprio e qui cominciano i guai, perché non c'è un esempio di come deve essere mandata la risposta, sì c'è scritto in formato JSON, ma codificata come?
Ci sono due esempi lato client, ma non ci sono di molto aiuto.

Ho cercato in rete e alla fine la risposta è venuta sia dal blog di jquery, sia dal sito di un altro blogger che faceva degli esempi lato server. Ed è presto detto!

La risposta deve sì essere codificata in json, ma in modo strano se vogliamo, io dopo tante prove ho risolto così:

// ometto il codice di verifica e controllo e inserisco solo ciò che importa per rispondere.
if ($risposta === true) echo json_encode(true);
else echo json_encode('Risposta sbagliata, ritenta!');

Come si vede il formato è particolare e la risposta all'analizzatore del browser appare proprio così:

"The answer is wrong, please try again."

Come una stringa, con tanto di virgolette, anche se generata come json, e solo così funziona.

Un poco di codice non guasta mai a questo punto.

Lato client:

$('#form').validate({
  onkeyup: false, 
  rules: {
    captcha: {
      url: 'verifica.php',
      data: {
        captcha: function(){ return $('#captcha').val()}, 
        lingua: 'it'
      },
      type: 'post',
      dataType: 'json'
  }
});

menzione a parte merita la funzione onkeyup: false che impedisce di fare una chiamata ajax ogni volta che si digita un tasto, la chiamata avverrà solo quando si lascia il campo controllato. Questo eviterà di sovraccaricare il serve con tante chiamate inutili.

In remoto invece il file è questo:

$torna = false;  //  se il passo successivo fallisce, la risposta è già impostata a false.
if (filter_has_var(INPUT_POST, 'captcha') && filter_has_var(INPUT_POST, 'lingua')) {
  $risposta = filter_array(INPUT_POST, 'captcha', FILTER_CALLBACK, ['options' => 'Verifica::verificaStringa']);  // Omesso il codice di verifica per facilità, ognuno fa le verifiche che vuole. ;)
  $risposta = Captcha::getRisposta($risposta, $_POST['lingua']);
  if ($risposta === true) $torna = true;
  else $torna = ('Risposta sbagliata, ritenta!';
}
echo json_encode($torna);

Ovviamente il file remoto è semplificato al massimo, non c'è un controllo sulla risposta, sarebbe troppo complesso ed esula da questo discorso, spero solo di essere riuscito ad aiutare qualcuno.