Creare form con validazione e CAPTCHA in Joomla 3 - quarta parte

Immagine da Joomla

Form HTML

<form action='#' method='post' id='form_demo'>
	<fieldset>
		<legend>I tuoi dati</legend>
		<div class="control-group">
			<div class="input-prepend">
				<span class="add-on"><span class="icon-user"></span></span>
				<input class="input-xxlarge" type='text' placeholder='Il tuo nome (3-15 caratteri, richiesto)' name='nome' id='nome' />
			</div>
		</div>
		<div class="control-group">
			<div class="input-prepend">
				<span class="add-on"><span class="icon-user"></span></span>
				<input class="input-xxlarge" type='text' placeholder='Il tuo cognome (3-15 caratteri, richiesto)' name='cognome' id='cognome' />
			</div>
		</div>
		<div class="control-group">
			<div class="input-prepend">
				<span class="add-on"><span class="icon-plus"></span></span>
				<input class="input-xxlarge" type='text' placeholder='Età (18-60, richiesto)' name='eta' id='eta' />
			</div>
		</div>
		<div class="control-group">
			<div class="input-prepend">
				<span class="add-on"><span class="icon-envelope"></span></span>
				<input class="input-xxlarge" type='text' placeholder='Il tuo indirizzo email (richiesto)' name='email' id='email' />
			</div>
		</div>
		<div class="control-group">
			<div><strong>Genere</strong> (richiesto)</div>
			<label class='radio inline'>
				<input id='maschio' type='radio' name='sesso' value='Maschio' /> Maschio
			</label>
			<label class='radio inline'> 
				<input id='femmina' type='radio' name='sesso' value='Femmina' /> Femmina
			</label>
			<label for="sesso" class="error"></label>
		</div>
		<div class="control-group">
			<div><strong>Il tuo sistema operativo</strong> (scegli almeno un sistema)</div>
			<label class='checkbox inline'>
				<input type='checkbox' name='os[]' id='win32' value='Windows' /> OS Windows 32/64 bit
			</label>
			<label class='checkbox inline'>
				<input type='checkbox' name='os[]' id='linux' value='Linux' /> Linux
			</label>
			<label class='checkbox inline'>
				<input type='checkbox' name='os[]' id='mac' value='Mac' /> Mac OS 
			</label>
			<label for="os[]" class="error"></label>
		</div>
		<div class="control-group">
			<textarea class="input-xxlarge" id='note' name='note' rows='5'  placeholder='Altre note e richieste'></textarea>
		</div>
		<div class="g-recaptcha" data-sitekey="6LcbzCEUAAAAAEl2nyx_h0kYgy6gOv4JYxnNarYI" data-callback="recaptchaCallback"></div>
		<input type="hidden" class="missingRecaptcha required" name="missingRecaptcha" id="missingRecaptcha">
	</fieldset>
	<div class="control-group text-center">
		<button class="btn btn-primary" type='submit' id='invia_form'>Invia</button>
	</div>
</form>
<script src='https://www.google.com/recaptcha/api.js?hl=it'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script src="/script/validate/validate_complete.js" ></script>

• La riga <div class="g-recaptcha" data-sitekey="6LcbzCEUAAAAAEl2nyx_h0kYgy6gOv4JYxnNarYI" data-callback="recaptchaCallback"></div> visualizza il reCAPCTHA. Rispetto a quanto visto nella seconda parte dell'articolo, compare un nuovo parametro data-callback: serve a nascondere il messaggio di errore per mancata compilazione, se presente, dopo che l'utente ha completato il reCAPTCHA. Ulteriori dettagli su questo nel file js più oltre.
• La riga <input type="hidden" class="missingRecaptcha required" name="missingRecaptcha" id="missingRecaptcha"> serve ad "intercettare" la mancata compilazione del reCAPTCHA, questo sarà più chiaro dando un'occhiata al file js aggiornato. Il tipo di campo è hidden perchè non vogliamo certamente visualizzarlo; si tratta di un campo di comodo, niente di più.
• Si notino anche i file .js necessari caricati al termine: api per reCAPTCHA, jQuery Validate e il nostro script di regole di validazione.

PHP

<?php  
	require_once('autoload.php'); 
	$secret = "tihogiàdettochequicivalachiaveprivata";
	$lang = 'it';
	$result=false;	
	$recaptcha = new \ReCaptcha\ReCaptcha($secret);
	
	$response = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);

	if ($response->isSuccess()) {
		$result=true;
	} 
	else {
		foreach ($response->getErrorCodes() as $code) {
			echo '<tt>Errore: ' , $code , '</tt> ';
		}
		
		$result=false;
	}
	echo json_encode($result);
?>

File .js

jQuery(document).ready(function() {
	jQuery("#form_demo").validate(
    {
		ignore: ".ignore",	
        rules:
        {
            nome: {
				required: true,
				minlength: 3,
				maxlength: 15
			},
            cognome: {
				required: true,
				minlength: 3,
				maxlength: 15
			},
			eta: {
				required: true,
				number: true,
				range: [18,60]
			},
            email:
            {
                required: true,
                email: true
            },
            sesso: "required",
            'os[]': "required",
			missingRecaptcha: {
				required: function() {
					if(grecaptcha.getResponse() == '') {
						return true;
					} else {
						return false;
					}
				}
			}
        },
        messages:
        {
            nome: {
				required: "<div class='help-inline'>Inserisci il nome</div>",
				minlength: "<div class='help-inline'>Il nome deve avere almeno 3 caratteri</div>",
				maxlength: "<div class='help-inline'>Il nome deve avere al massimo 15 caratteri</div>"
			},
            cognome: {
				required: "<div class='help-inline'>Inserisci il cognome</div>",
				minlength: "<div class='help-inline'>Il cognome deve avere almeno 3 caratteri</div>",
				maxlength: "<div class='help-inline'>Il cognome deve avere al massimo 15 caratteri</div>"
			},	
			eta: {
				required: "<div class='help-inline'>Indica la tua età</div>",
				number: "<div class='help-inline'>L'età va indicata con un numero</div>",
				range: "<div class='help-inline'>L'età deve essere compresa tra 18 e 60 anni</div>"
			},
            email: "<div class='help-inline'>Inserisci un indirizzo email valido</div>",
            sesso: "<div class='text-error'>Seleziona sesso</div>",
            'os[]': "<div class='text-error'>Seleziona uno o più sistemi operativi</div>",
			missingRecaptcha: "<div class='text-error'>Verifica il reCAPTCHA</div>"
        },
		highlight: function(element) {
			if (jQuery(element).attr("name") != "os[]" && jQuery(element).attr("name") != "sesso")
				jQuery(element).closest('.control-group').removeClass('success').addClass('error');
         },
        unhighlight: function(element){
			if (jQuery(element).attr("name") != "os[]" && jQuery(element).attr("name") != "sesso")
				jQuery(element).closest('.control-group').removeClass('error').addClass('success');
        }
    });
});

function recaptchaCallback() {
  jQuery('#missingRecaptcha').valid();
};

• Prima della sezione rules compare una nuova "direttiva", ignore: ".ignore",. Serve per ignorare la validazione per i soli campi con classe ignore. Perchè l'ho aggiunta? Perchè il valore predefinito per questo selettore è hidden, che evita la validazione per i campi nascosti. Come abbiamo visto nel codice HTML, la visualizzazione del messaggio di errore in caso di validazione non compilata fa uso proprio di un campo nascosto, per cui non possiamo ignorarlo.
• Nella stessa sezione rules ho aggiunto un nuovo elemento: missingRecaptcha:, che è definito come obbligatorio (required) utilizzando una chiamata ad una funzione per verificare se deve tornare true - e allora l'elemento è richiesto o false - elemento non richiesto. Questo è il controllo sul già citato campo nascosto missingRecaptcha, la cui obbligatorietà, in base alle regole, dipende dal fatto che l'utente abbia completato la validazione anti-bot. Quindi: se l'utente non compila il reCAPTCHA, viene visualizzato un messaggio di errore.
• Di conseguenza ho aggiunto un nuovo messaggio di errore nella sezione messages: hiddenRecaptcha: "<div class='text-error'>Verifica il reCAPTCHA</div>", da visualizzare se viene violata la regola aggiunta.
• Infine, ho aggiunto nel file validate.js la funzione recaptchaCallback, che verifica la validità dell'elemento con id missingRecaptcha. Serve a rimuovere il messaggio di errore in caso di reCAPTCHA non compilato.