In this post, I want to submit a form validator "I made with the beloved classic ASP, and the help of Ajax.
The purpose of the system, is to get a reply from our server, and formatting the validity or otherwise of the data entered in the fields of our form.
Examples would be: get the answer immediately the validity or otherwise of an email address (means 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
given the past - and finally the page containing the form, which we want to manage the fields
Now I explain the code Ajax, and then do a brief mention on the ASP, but if you want to download directly to the example, go to fund post ....
Ajax code used:
var check;
var value var value2
check_valore function (input, tipo_controllo, n, sign, table, field, n1, n2, n3) {
value = 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 + + "& value = "+ value +" & n = "+ n +" & sign = "+ sign +" & table = "+ table +" & field = "+ field +" & 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 + + "& value =" + value + "& n =" + n + "& sign =" + sign + "& table =" + table + "& field =" + field + "& n1 =" + n1 + "& n2 =" + n2 + "& n3 =" + n3, true);
check.send ();}
}}
check_valore2 function (input, tipo_controllo, n, sign, table, field, n1, n2, n3, input2) {
value = document.getElementById (input). value;
value2 = 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 + "& value =" + value + "& n =" + n + "& sign =" + sign + "& table =" + table + "& field =" + field + "& n1 =" + n1 + "& n2 =" + n2 + "& n3 =" + n3 + "& value2 =" + value2, 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 + + "& value =" + value + "& n =" + n + "& sign =" + sign + "& table =" + table + "& field =" + field + "& n1 =" + n1 + "& n2 =" + n2 + "& n3 =" + n3 + "& value2 =" + value2, true);
check.send ();
}
}
}
ricevi_valore function (val) {var response
;
if (check.readyState == 2) {answer =
check.responseText;
document.getElementById ('re_' + val). InnerHTML = '' ;
} if (check.readyState == 4) {response =
check.responseText;
document.getElementById ('re_' + val). innerHTML = answer;}
}
from the wallet main, which is called "check_valore" between paretesi I can see the parameters passed to the function and then perform the checks in the ASP file.
the parameters that can steps are:
required parameters:
- input: contains the name of the field where the value will be inserted to control
- tipo_controllo : Here I say that kind of control I want to do.
Possible values \u200b\u200bcurrently are:
- text: Make sure the value is a string
- numero_intero : Make sure the value is an integer
- numero_decimale : Make sure the value is a decimal number with comma or point
- currency : Make sure the value is a decimal number with comma or
- length : check the length of the value, and here come into play two optional parameters, or "n" which will contain the number of characters to be controlled according to the parameter "sign", but that will indicate whether the value should be "less than or equal to", "greater than or equal" or "equal" to the number set parameter "n"
- date: Check that the value is a date
- email : that validates the format of the email included
- presenza_db_access_testo : checks for the value in an Access database, and here Two other parameters come into play that are "table" that indicates the table from which to search, and "field" indicates that the field in which to search (the database name is inserted in the first few lines of configuration database in the ASP file. Of course, nothing prevents you add a parameter to handle even the name of the database, if we had more than one)
- presenza_db_access_numero : look for a numeric value in the database
- presenza_db_mysql_testo : look for a text value in a database MySql
- presenza_db_mysql_numero : look for a numeric value in a MySQL database
- sicurezza_password : Finally in this control, the three parameters come into play "n1" "n2" and "n3", which serve to define the intervals number of characters, and then receive the security level of value added
- sicurezza_password_img : as the previous test, but with a kind of visual, like a picture (I put a div with a background color, can obviously be replaced with a different image for the three answers "insecure password", "password secure enough "and" very secure password ")
- controllo_uguaglianza_stringa : This type of control, makes a comparison to the flight of two values \u200b\u200bin two different inputs. So it may serve in cases such as the inclusion of the Password and Password for control of rehabilitation, or for other types of numeric data, currency or dates.
optional parameters:
- n: to indicate a number of characters to check
- sign: indicates 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
Defined the parameters of the function, let's see what makes the function: the body is the classic Ajax request, with the two modes depending on the type of browser, which controls whether or not the handles ActiveX.
The parameters are sent through the URL with "Get" (you could also do a version that sends the data with "Post"), and you get a response from the server, which will run the checks by calling our ASP file called "asp-validator.asp.
The answer will be managed in the second function, namely "ricevi_valore" as you can see, this function receives a parameter, which is nothing but the id of the field that we're checking, and will serve to indicate the ID of in which we enter the answer.
example I've created, next to the cell that contains the input, a second cell that has the id, the prefix "re_" and then the same name as input. At this point, I can give to my Javascript function to insert the control response, the cell that has the id "re_" + "input name to check".
events managed to launch control are "onblur", that starts when you leave your input, and "onkeyup", which is run as you write, every time you add a character (this event is used for controlling password security)
careful to give the proper name of the form, function 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.
0 comments:
Post a Comment