Validare campi form con asp e ajax (ajax form validator)

In questo post, voglio presentare un "form validator" che ho realizzato con il caro ASP classico, e l'aiuto di Ajax.

La finalità del sistema, è quello di ottenere una risposta immediata dal nostro server, sulla validità e formattazione o meno, dei dati inseriti nei campi della nostra form.

Alcuni esempi potrebbero essere: ottenere subito la risposta della validità o meno di un indirizzo email (si intende la validità del formato, non che poi la mail sia reale o no), oppure la ricerca nel nostro database della presenza o meno di un dato, ad esempio nella form di registrazione di un utente, controllare subito se la username inserita sia già presente....piuttosto che controllare la validità di formattazione di una data.

Ovviamente il sistema è poi aperto all'eventuale aggiunta di altri tipi di controlli, oltre a quelli che ho già inserito io.

Sostanzialmente lo script è costituito da:
- un file Javascript, che contiene il codice Ajax con la chiamata XmlHttpRequest
- un file ASP, che contiene tutti i tipi di controlli gestiti per ora, che restituirà il messaggio positivo o negativo dopo il controllo del dato passato
- ed infine la pagina che contiene la form, della quale vogliamo gestire i campi

Ora spiego il codice Ajax, e di seguito do un breve cenno su quello ASP, ma se volete scaricare direttamente l'esempio, andate a fondo post....

Codice Ajax usato:

var check;
var valore
var valore2
   
function check_valore(input, tipo_controllo, n, segno, tabella, campo, n1, n2, n3) 
{

valore=document.getElementById(input).value;
    // branch for native XMLHttpRequest object
    if (window.XMLHttpRequest) {
        check= new XMLHttpRequest();
        check.onreadystatechange =  function () {if (check.readyState == 4){ricevi_valore(input);}};
        check.open("GET", "asp-validator.asp?tipo_controllo="+tipo_controllo+"&valore="+valore+"&n="+n+"&segno="+segno+"&tabella="+tabella+"&campo="+campo+"&n1="+n1+"&n2="+n2+"&n3="+n3, true);
        check.send(null);
    // branch for IE/Windows ActiveX version
    } else if (window.ActiveXObject) {
        check= new ActiveXObject("Microsoft.XMLHTTP");
        if (check) {
         check.onreadystatechange =  function () {if (check.readyState == 4){ricevi_valore(input);}};
            check.open("GET", "asp-validator.asp?tipo_controllo="+tipo_controllo+"&valore="+valore+"&n="+n+"&segno="+segno+"&tabella="+tabella+"&campo="+campo+"&n1="+n1+"&n2="+n2+"&n3="+n3, true);
            check.send();
        }
    }
}

function check_valore2(input, tipo_controllo, n, segno, tabella, campo, n1, n2, n3, input2) 
{

valore=document.getElementById(input).value;
valore2=document.getElementById(input2).value;
    // branch for native XMLHttpRequest object
    if (window.XMLHttpRequest) {
        check= new XMLHttpRequest();
        check.onreadystatechange =  function () {if (check.readyState == 4){ricevi_valore(input);}};
        check.open("GET", "asp-validator.asp?tipo_controllo="+tipo_controllo+"&valore="+valore+"&n="+n+"&segno="+segno+"&tabella="+tabella+"&campo="+campo+"&n1="+n1+"&n2="+n2+"&n3="+n3+"&valore2="+valore2, true);
        check.send(null);
    // branch for IE/Windows ActiveX version
    } else if (window.ActiveXObject) {
        check= new ActiveXObject("Microsoft.XMLHTTP");
        if (check) {
         check.onreadystatechange =  function () {if (check.readyState == 4){ricevi_valore(input);}};
            check.open("GET", "asp-validator.asp?tipo_controllo="+tipo_controllo+"&valore="+valore+"&n="+n+"&segno="+segno+"&tabella="+tabella+"&campo="+campo+"&n1="+n1+"&n2="+n2+"&n3="+n3+"&valore2="+valore2, true);
            check.send();
        }
    }
}

     
  function ricevi_valore(val) {   
    var risposta;       
   if (check.readyState == 2) {     
    risposta=check.responseText;

   document.getElementById('re_'+val).innerHTML = '';
    }
   if (check.readyState == 4) {     
    risposta=check.responseText;

   document.getElementById('re_'+val).innerHTML = risposta;
    }
 }

Partiamo dalla funzione principale, che si chiama "check_valore": tra paretesi vedete i parametri che posso passare alla funzione per poi eseguire i controlli nel file ASP.
I parametri che posso passare sono:

parametri obbligatori:
- input: contiene il nome del campo nel quale verrà inserito il valore da controllare
- tipo_controllo: qui dico che tipo di controllo voglio fare.
I valori possibili attualmente sono:
- testo: controlla che il valore sia una stringa
- numero_intero: controlla che il valore sia un numero intero
- numero_decimale: controlla che il valore sia un numero decimale con virgola o punto
- valuta: controlla che il valore sia un numero decimale con virgola o punto
- lunghezza: controlla la lunghezza del valore, e qui entrano in gioco due parametri opzionali, cioè "n" che conterrà il numero di caratteri da controllare in base al parametro "segno", che invece indicherà se il valore dovrà essere "minore o uguale", "maggiore o uguale" o "uguale" al numero impostato nel parametro "n"
- data: controlla che il valore sia una data
- email: che valida il formato dell'email inserita
- presenza_db_access_testo: controlla la presenza del valore in un database Access, e qui entrano in gioco altri due parametri che sono "tabella" che indica la tabella nella quale cercare, e "campo" che indica il campo nel quale cercare (il nome del database si inserisce nelle prime righe di configurazione del database, nel file ASP. Ovviamente nulla vieta di aggiungere anche un parametro per gestire anche il nome del database, nel caso ne avessimo più di uno)
- presenza_db_access_numero: cerca un valore numerico nel database
- presenza_db_mysql_testo: cerca un valore di testo in un database MySql
- presenza_db_mysql_numero: cerca un valore numerico in un database MySql
- sicurezza_password: infine in questo controllo, entrano in gioco i tre parametri "n1", "n2" e "n3", che servono a definire gli intervalli di numero di caratteri, per poi ricevere il livello di sicurezza del valore inserito
- sicurezza_password_img: come il controllo precedente, ma con una risposta di tipo visuale, come un'immagine(io ho messo un div con un colore di sfondo, ovviamente può essere sostituito con un'immagine diversa per le tre risposte "password poco sicura", "password abbastanza sicura" e "password molto sicura")
- controllo_uguaglianza_stringa: questo tipo di controllo, fa un confronto al volo di due valori in due diverse input. Quindi può servire in casi come l'inserimento di Password e reinserimento della Password per controllo, oppure per altri tipi di dati numerici, valute o date.


parametri opzionali:
- n: per indicare un numero di caratteri da controllare
- segno: indica il segno da utilizzare nel controllo del numero (valori possibili "<=", ">=", "=")
- tabella: indica la tabella del database nella quale cercare
- campo: indica il campo della tabella, nel quale cercare
- n1: indica l'intervallo per ottenere la prima risposta (es. password poco sicura)
- n2: indica l'intervallo per ottenere la seconda risposta (es. password abbastanza sicura)
- n3: indica l'intervallo per ottenere la terza risposta (es. password molto sicura)
- input2: invia un valore da una seconda input, da utilizzare per fare controlli al volo tra diverse input


Definiti i parametri della funzione, passiamo a vedere cosa fa la funzione: il corpo è la classica richiesta Ajax, con le due modalità in base al tipo di browser, che controlla se gestisce o meno l'ActiveX.

I parametri vengono inviati tramite URL, con metodo "Get" (si potrebbe fare anche la versione che invia i dati con metodo "Post"), e si ottiene la risposta dal server, che avrà eseguito i controlli richiamando il nostro file ASP, chiamato "asp-validator.asp".
La risposta verrà gestita nella seconda funzione, cioè "ricevi_valore": come vedete, anche questa funzione riceve un parametro, che non è altro che l'id del campo che stiamo controllando, e servirà per indicare l'id dell'elemento nel quale vogliamo inserire la risposta.
Io nell'esempio ho creato, a fianco della cella che contiene l'input, una seconda cella, che ha come id, un prefisso "re_" e poi lo stesso nome della input. A questo punto, posso indicare alla mia funzione Javascript, di inserire la risposta del controllo, nella cella che ha come id "re_" + "nome input da controllare".

Gli eventi gestiti per lanciare il controllo sono "onblur", che viene avviato quando si lascia la input, e "onkeyup", che viene avviato mentre si scrive, ogni volta che viene aggiunto un carattere(questo evento è usato nel controllo della sicurezza della password)

Fate attenzione a dare il giusto nome della form, nella funzione javascript. (io nell'esempio l'ho chiamata "form").

Qui potete testare l'esempio:



Qui potete scaricare lo zip con l'esempio: milanositi: Form Validator Asp Ajax

Ovviamente, se avete voglia di aggiungere qualche controllo fatelo...che magari poi aggiorniamo il file...se volete che ne aggiunga io....fatemelo sapere!

Se avete problemi nell'utilizzare il codice, fatemi sapere.