paolo@bimodesign.com | +34 608 61 64 10

JS / Ajax / Jquery / Json

        

Controlli di validazione in una form con Ajax

Per implementare questo effetto, occorre definire una struttura creando queste directory

  • css: conterra' il file form.css
  • images: conterra' il file/immagine msg_arrow
  • include:inseanagclie.php
  • js: forms_controls.js

Chiaramente, potete evitare di strutturlo in questo modo, ma questo e' un modo piu' chiaro per suddividere i file e le funzionalita'.

inseanagclie.php

Questo e' il file principale. La form da cui si effettua l'inserimento dei dati nella base dati e dove verranno controllati i valori inseriti.

Definiamo tutti i nomi degli input come componenti di un array "campo", il cui indice cambia progressivamente per ogni input inserito nella form. Questo, oltre a facilitare la modalita' di segnalazione degli errori, permette di aggiungere eventuali nuovi campi di input in maniera veloce ed inoltre recuperare i valori degli stessi con un semplice foreach sull'array.

Questo il codice

<?php

if(isset($_POST['action']) and $_POST['action'] == 'insert')
{
	$campi=$_POST[campo];

	foreach($campi as $value){

		//printf('%s <br>', $var_nometabe);
		//printf('%s <br>', $value);
	}
	....
}

?>
	<div id="wrapper">
	  <form name="form" id="form" class="form" onsubmit="return validate(this)" method="post">
	  	<input type="hidden" name="action" value="insert" />

		<label for="campo00">Descriptión:</label>
		<input type="text" name="campo[0]" id="campo00_none"/>

		<label for="campo01">E-mail:</label>
		<input type="text" name="campo[1]" id="campo01_email"/>

		<label for="campo02">Web:</label>
		<input type="text" name="campo[2]" id="campo02_webb"/>

		<label for="campo03">Idioma:</label>
		<select name="campo[3]" id="campo03_select">
			<option value="">-- Elige un valor -- </option>
			<?
				while($var_tabepara01 = $tabepara01->fetch_assoc()) {
				   echo "<option value=".$var_tabepara01['codi_tipo_ling'].">".$var_tabepara01['desc_sigl_ling']."</option>";
			}
			?>
		</select>

		<label for="campo04">Observaciones:</label>
		<textarea  name="campo[4]" id="campo04_none">Inserart un comentario</textarea>

		<input class="testo_button" type="submit" value="Enter" />
	  </form>
	</div>

Notate, oltre alla nomenclatura del nome dei campi e delle label, descritta in precedenza, l'id di ogni campo di input presenta una sintassi del tipo

campoNN_tipodicontrollo

Vedremo l'utilizzo nel file strform_controls.js

E' diviso in due parti. Spieghero' la parte che va adattata alle proprie esigenze, ovvero ai vari controlli che di volta in volta si richiederanno. La parte dell'effetto grafico, compreso il file css, lo lascio alla vostra curiosita'. Il codice completo lo potete scaricare da questo archivio (rar)

I commenti li inserisco all'interno del codice

function validate(form) {

	// Definizione delle regex per i controlli di validazione sintattica
	// Per spiegazione dettagliata, fare riferimento alla relativa sezione dei questo blog

	var nameRegex    = /^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$/;
	var emailRegex   = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
	var webbRegex   =/^(http|https):\/\/[a-z0-9]+([\-|\.]{1}[a-z0-9]+)*\.[a-z]{2,5}((:[0-9]{1,5})?\/.*)?$/;

	// Controlla anche la corrispondenza in giorni, pero accetta anche 1/10/2009
	var dataRegex    = /^((3[01]|[12]\d|0?[1-9])\/(0?[13578]|10|12)\/(\d\d)?\d\d|(30|[12]\d|0?[1-9])\/(0?[469]|11)\/(\d\d)?\d\d|(2[0-8]|[01]\d|0?[1-9])\/(0?2)\/(\d\d)?\d\d|29\/(0?2)\/(1200|1600|2000|2400|2800|00)|29\/(0?2)\/(\d\d)?(0[48]|[2468][048]|[13579][26]))$/;

	var messageRegex = new RegExp(/<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>/gim);

	// Ciclo su tutti gli elementi/input del form, considerando che la sintassi e' del tipo
	// campoNN

	for( var i = 0, max = form.elements.length; i < max; i++ ){
		var campo_value = document.form.elements['campo['+i+']'].value;
		var campo_id = document.form.elements['campo['+i+']'].id;

		// Recupero il tipodicontrollo
		var tipo   = Mid(campo_id,8,campo_id.length);

		// Controllo il campo se e' null
		if(campo_value == "") {
		    inlineMsg(campo_id,'Insertar un valor',2);
		    return false;
		}

		// Eseguo la scelta del controllo da effettuare
		// richiamando la relativa Regex e usando la funzione
		// inLineMsg che produce l'effetto grafico.

		switch(tipo) {
			case "text":
			  if(!campo_value.match(nameRegex)) {
			    inlineMsg(campo_id,'Insertar un nombre válido',2);
			    return false;
			  }

			  break;

			case "email":
			  if(!campo_value.match(emailRegex)){
			    inlineMsg(campo_id,'Insertar un correo válido',2);
			    return false;
			  }

			  break;

			case "nume":
			  if (isNaN(campo_value)) {
			    inlineMsg(campo_id,'Insertar sólo valores numéricos',2);
			    return false;
			  }

			  break;

			case "data":
			  if(!campo_value.match(dataRegex)){
			    inlineMsg(campo_id,'Insertar la fecha en el formato dd/mm/yyyy',2);
			    return false;
			  }

			  break;

			case "webb":
			  if(!campo_value.match(webbRegex)){
			    inlineMsg(campo_id,'Insertar también http://',2);
			    return false;
			  }

			  break;
		}
	}

	return true;
}

Questa struttura la utilizzo in tutte le form del pannello di controllo, che fornisco ai miei clienti. Va sicuramente migliorata e aggiunti altri controlli, ma vista la flessibilità il tutto risulta abbastanza semplice e veloce. Ricordo che il codice completo lo potete scaricare da questo archivio (rar)