PDA

View Full Version : [FORM] Controlli JS sui campi.


Matrixbob
04-07-2005, 18:11
Senza che mi metto a scrivere una ad una le funzioni JS, non è che potete passarmi qualche link?! Grazie.

Matrixbob
04-07-2005, 18:16
Senza che mi metto a scrivere una ad una le funzioni JS, non è che potete passarmi qualche link?! Grazie.
Tipo:

function CheckMail(form){
var x = form.email.value;
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(x)){
alert('Inserire un indirizzo email valido!');
form.email.focus();
return false;
}
}

Pero che siano:
ChekText(this)
CheckDate(this)
o cose simili.

Per metterle tutte in una funziona come faccio?!
Le metto in AND tra loro in un'altra funzione?!
Altrimenti che mi tocca fare un onSubmit lungo un km?!

Matrixbob
04-07-2005, 22:38
Ehm ragazzi ... fin'ora ho fatto come vi posterò, ma mi raccomando fermatemi se sto facendo delle cagate plz :help:

Il file.JS ...

function Insautore() {
// Variabili associate ai campi del modulo
var nome = document.insautore.nome.value;
var cognome = document.insautore.cognome.value;
var cf = document.insautore.cf.value;
var email = document.insautore.email.value;
var pwd = document.insautore.pwd.value;

// Espressione regolare dell'email
var email_reg_exp = /([a-z0-9_\.\-])+\@(([a-z0-9\-]{2,})+\.)+([a-z0-9]{2,})+/;

//Effettua il controllo sul campo NOME
if ((nome == "") || (nome == "undefined")) {
alert("Il campo Nome è obbligatorio.");
document.insautore.nome.focus();
return false;
}
//Effettua il controllo sul campo COGNOME
else if ((cognome == "") || (cognome == "undefined")) {
alert("Il campo Cognome è obbligatorio.");
document.insautore.cognome.focus();
return false;
}
//Effettua il controllo sul campo COGNOME
else if ((cf == "") || (cf == "undefined")) {
alert("Il campo Codice fiscale è obbligatorio.");
document.insautore.cf.focus();
return false;
}
//Effettua il controllo sul campo PASSWORD
else if ((pwd == "") || (pwd == "undefined")) {
alert("Il campo Password è obbligatorio.");
document.insautore.pwd.focus();
return false;
}
else if (!email_reg_exp.test(email) || (email == "") || (email == "undefined")) {
alert("Inserire un indirizzo email corretto.");
document.insautore.email.select();
return false;
}
//INVIA IL MODULO
else {
document.insautore.action = "02-next1.jsp";
document.insautore.submit();
}
}

function Inslavoro() {
// Variabili associate ai campi del modulo
var titolo = document.inslavoro.titolo.value;
var argomento = document.inslavoro.argomento.value;
var path_file = document.inslavoro.path_file.value;
var data_scaletta = document.inslavoro.data_scaletta.value;
var evento_nome = document.inslavoro.evento_nome.value;
var autore_id = document.inslavoro.autore_id.value;

// Espressione regolare della data per la scaletta delle presentazioni
// http://web.tiscali.it/alexmfm/reg_exp.html
var data_scaletta_reg_exp = /[0-9]{4}-[0-9]{1,2}-[0-9]{1,2}(\s[0-9]{1,2}:[0-9]{1,2}:[0-9]{1,2})?/;

//Effettua il controllo sul campo NOME
if ((titolo == "") || (titolo == "undefined")) {
alert("Il campo Titolo è obbligatorio.");
document.inslavoro.titolo.focus();
return false;
}
//Effettua il controllo sul campo COGNOME
else if ((argomento == "") || (argomento == "undefined")) {
alert("Il campo Argomento è obbligatorio.");
document.inslavoro.argomento.focus();
return false;
}
//Effettua il controllo sul campo PASSWORD
else if ((path_file == "") || (path_file == "undefined")) {
alert("Inserire un Path_file nel formato 'c:\\\\dir\\\\file.ext'.");
document.inslavoro.path_file.focus();
return false;
}
else if (!data_scaletta_reg_exp.test(data_scaletta) || (data_scaletta == "") || (data_scaletta == "undefined")) {
alert("Inserire una data nel formato 'AAAA-MM-GG' oppure 'AAAA-MM-GG hh:mm:ss'.");
document.inslavoro.data_scaletta.select();
return false;
}
else if ((evento_nome == "") || (evento_nome == "undefined")) {
alert("Il campo Evento_nome è obbligatorio.");
document.inslavoro.evento_nome.focus();
return false;
}
else if ((autore_id == "") || (autore_id == "undefined")) {
alert("Il campo Autore_id è obbligatorio.");
document.inslavoro.autore_id.focus();
return false;
}
//INVIA IL MODULO
else {
document.inslavoro.action = "02-next2.jsp";
document.inslavoro.submit();
}
}

La pagina.html ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>SYSCONF | Admin's menù</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" content="conferenze, gestione conferenze" />
<meta name="Description" content="SYSCONF" />
<link rel="stylesheet" type="text/css" href="../css/ws-style.css" />
<script language="javascript" type="text/javascript" src="../js/ws.js"></script>
</head>

<body onload="displayt(); MM_preloadImages('img/login2.jpg','img/loginreg2.jpg')">

<form name="inslavoro" method="post">
<h3 align="left">Inserimento lavoro dell'autore</h3>
<p align="left">Titolo:<input type="text" name="titolo" size="32" maxlength="32" /></p>
<p align="left">Argomento:<input type="text" name="argomento" size="32" maxlength="32" /></p>
<p align="left">Pathfile del lavoro:<input type="text" name="path_file" size="32" maxlength="128" /></p>
<p align="left">Datatime di scaletta:<input type="text" name="data_scaletta" size="32" maxlength="32" /></p>
<p align="left">Evento:<select name="evento_nome">
<option>sistemi adattativi</option><option>bd intelligenti</option><option>polline</option><option>einstein</option>
</select></p>
<p align="left"><input name="autore_id" type="hidden" value="18" /></p>
<p align="left"><input type="reset" value="Reset"/><input type="submit" value="Prosegui" onClick="Inslavoro()" /></p>
</form>
</body>
</html>

Matrixbob
04-07-2005, 23:17
AI AI, mi si incasina sui "SELECT" del form!!!

Help, ma non avete voi qualcosa di + semplice da implementare?!
Sto impazzendo!!! :(

http://img157.imageshack.us/img157/5822/immagine8gn.gif

Matrixbob
05-07-2005, 10:11
Stavo pensando ad una funzione unica che controlla che tipo di campo è e di conseguenza seglie il test da fare, ma sono in alto mare, ho buttato giù questo inizio.
Penso che possa servire a tutti se la realizziamo, tnx.

function doSubmit(url)
{
// Puntatore all'oggetto form
var F = document.form;
var check = true;

// Ciclo su tutti gli elementi del form
for(var i = 0; i < F.length; i++)
{
// puntatore all'oggetto elemento
var elemento = F.elements(i);
// controllo se l'elemento è di tipo "select"
if (F.elements(i).type != "select-one") { check = false; }
if (check == false)
{
alert('Compilare il form correttamente!');
}
else
{
check = true;
document.form.action = url;
document.form.submit();
}
}
}

Solo che non conoscendo gli oggeti JS, non so bene cosa sto combinando!
H E :help: L P ...

... da richiamre poi così:

<input type="button" value="Prosegui" onClick="doSubmit('02-next2.jsp');" />

Matrixbob
05-07-2005, 11:14
Ho chiesto aiuto anche sul forum di HTML.IT (http://forum.html.it/forum/showthread.php?s=&postid=8092778), ma dubito che se l'aiuto non giunge dal miti HWUP allora giunga da la ... :)

DigitalKiller
05-07-2005, 12:27
Ho chiesto aiuto anche sul forum di HTML.IT (http://forum.html.it/forum/showthread.php?s=&postid=8092778), ma dubito che se l'aiuto non giunge dal miti HWUP allora giunga da la ... :)
Scusami ho perso un po' il filo del discorso :D Possiamo ricapitolare cosa devi fare ed il problema? :)

Matrixbob
05-07-2005, 22:40
Scusami ho perso un po' il filo del discorso :D Possiamo ricapitolare cosa devi fare ed il problema? :)
Ciao socio! :D

INTRO AL PERSONAGGIO:
preciso che sono 1 di quei personaggi che deve fare 1 cosa e ne pensa altre 100 in mezzo, saltando da una soluzione ad un altra.

OBBIETTIVO:
sto implementando 1 aplz web (praticamente 1 sito) x gestire 1 sistema di conferenze.
La parte cliente va in PHP e la parte administrator va in J2EE.

SVILUPPO:
ho scelto il JSP alle Servlet ed ho scelto le DBTAGS per accedere al database MySQL.

INTRO AL PROBLEMA:
mentre i controlli sui dati inseriti (bene o male) lo so fare con la tecnica di PHP_SELF_SUBMIT. in JSP mi trovo spiazzato ed allora ho deciso di ricorrere al buon vecchio Javascript.

PROBLEMI:
[1] Essendo pseudo-programmatore Pascal/C/PHP ed 1 po' JAVA pensavo di cavarmela in 2 orette nell'implementare i controlli in Javascript ed invece no.
[2] Conosco poco gli oggetti di questo "ambiente".
[3] Stavo scrivendo 1 funzione di controllo per ogni FORM del sito ed ad 1 certo punto mi sono rotto ed ho pensato a se era possibile fare una sola funzione che si adattasse al problema.
Ad esempio che riconoscesse da sola il FORM di contesto e che controllasse il type del campo del form, scegliendo automaticamente il controllo da fare.
[4] Ad 1 certo punto mi sono accorto che si perdeva anche 1 campo hidden che mi porto dietro da inserire nel database.

CONCLUSIONE:
mi sento demoralizzato e cerco aiuto in voi prima di perdere chissà quanto tempo nel capire cosa è possibile e cosa meno, ed in che modo nel Javascript.

NUOVO OBBIETTIVO:
Portare a termine almeno una delle strada percorriibli.

Matrixbob
05-07-2005, 23:05
Qui:
[JS] Controllo form generico: help! (http://forum.html.it/forum/showthread.php?s=&threadid=853926)
pare sia all'ordine del giorno :fagiano: , una sciocchezza! Muahahh muaahahh ah ah .... ehhhhh :O

Matrixbob
06-07-2005, 12:34
Ho trovata questa:

//funzione che verifica i radio buttons
function verif1() {
//ciclo per esplorare tutti i bottoni
for(n=0;n<4;n++) {
//quando un bottone risulta checked si passa alla verifica successiva
if(document.form1.radio[n].checked) {
verif2(n)
break
}
//se nessun bottone risulta checked viene bloccato l'invio del form
if(!document.form1.radio[n].checked && n==3) {
alert("Non hai selezionato un\n radio button")
return false
}
}
}
//funzione che verifica le checkbox
function verif2() {
//setta le variabili che stabiliscono il numero minimo e massimo di chkbox spuntate
max=0
min=0
//nn2 è la variabile che memorizzare il valore della chkbox spuntata
nn2=0
for(nn=0;nn<4;nn++) {
if(document.form1.chkbox[nn].checked) {
max++
nn2=nn
//se è spuntata più di una checkbox blocca l'invio del form
if(max>1) {
alert("Hai spuntato più di una checkbox")
return false
}
}
//se non è spuntata nessuna chkbox blocca l'invio del form
if(!document.form1.chkbox[nn].checked) {
min++
if(nn==3 && min!=3) {
alert("Non hai spuntato una checkbox")
return false
}
}
}
//se esiste una sola chkbox spuntata prosegue nella verifica
if(max==1) {
verif3(n,nn2)
}
}
//funzione che verifica la selection list
function verif3() {
for(nnn=0;nnn<4;nnn++) {
//in caso di selezione si prosegue con la verifica successiva
if(document.form1.select1.options[nnn].selected) {
verif4(n,nn,nnn)
break
}
//senza opzioni selezionate l'invio del form si blocca
if(!document.form1.select1.options[nnn].selected && nnn==3) {
alert("Non hai selezionato\n un'opzione della lista")
return false
}
}
}
//funzione che verifica che la textbox non sia vuota
function verif4() {
txt1=document.form1.txt.value
if(txt1=="") {
alert("Non hai inserito del testo nella textbox")
return false
}
else {
verif5(n,nn,nnn,txt1)
}
}
//funzione che verifica che la passwordbox non sia vuota
function verif5() {
pwd1=document.form1.pwd.value
if(pwd1=="") {
alert("Non hai inserito una password nella passwordbox")
return false
}
else {
verif6(n,nn,nnn,txt1,pwd1)
}
}
//funzione che verifica che la textarea non sia vuota
function verif6() {
txta1=document.form1.txta.value
if(txta1=="") {
alert("Non hai inserito del testo nella textarea")
return false
}

Ma come faccio capire quanti indici hanno le check box, i selct, etc .. ?! :mbe: :confused:

Matrixbob
06-07-2005, 12:52
Seguendo lo stile di killer:

function CheckAutore(form){
var nome = form.nome.value;
var cognome = form.cognome.value;
var cf = form.cf.value;
var email = form.email.value;
var pwd = form.pwd.value;

// Espressione regolare dell'email
var email_re = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

//Effettua il controllo sul campo NOME
if ((nome == "") || (nome == "undefined")) {
alert("Il campo Nome è obbligatorio.");
form.nome.focus();
return false;
}
//Effettua il controllo sul campo COGNOME
else if ((cognome == "") || (cognome == "undefined")) {
alert("Il campo Cognome è obbligatorio.");
form.cognome.focus();
return false;
}
//Effettua il controllo sul campo CF
else if ((cf == "") || (cf == "undefined")) {
alert("Il campo Codice fiscale è obbligatorio.");
form.cf.focus();
return false;
}
//Effettua il controllo sul campo PWD
else if ((pwd == "") || (pwd == "undefined")) {
alert("Il campo Password è obbligatorio.");
form.pwd.focus();
return false;
}
//Effettua il controllo sul campo EMAIL
if (!email_re.test(email) || (email == "") || (email == "undefined")) {
alert('Inserire un indirizzo email valido!');
form.email.focus();
return false;
}
else return true;
}
}

Richiamato con:

<form name="insautore" method="post" action="02-next1.jsp" onSubmit="return CheckAutore(this)">

DigitalKiller
06-07-2005, 13:12
Ho trovata questa:

//funzione che verifica i radio buttons
function verif1() {
//ciclo per esplorare tutti i bottoni
for(n=0;n<4;n++) {
//quando un bottone risulta checked si passa alla verifica successiva
if(document.form1.radio[n].checked) {
verif2(n)
break
}
//se nessun bottone risulta checked viene bloccato l'invio del form
if(!document.form1.radio[n].checked && n==3) {
alert("Non hai selezionato un\n radio button")
return false
}
}
}
//funzione che verifica le checkbox
function verif2() {
//setta le variabili che stabiliscono il numero minimo e massimo di chkbox spuntate
max=0
min=0
//nn2 è la variabile che memorizzare il valore della chkbox spuntata
nn2=0
for(nn=0;nn<4;nn++) {
if(document.form1.chkbox[nn].checked) {
max++
nn2=nn
//se è spuntata più di una checkbox blocca l'invio del form
if(max>1) {
alert("Hai spuntato più di una checkbox")
return false
}
}
//se non è spuntata nessuna chkbox blocca l'invio del form
if(!document.form1.chkbox[nn].checked) {
min++
if(nn==3 && min!=3) {
alert("Non hai spuntato una checkbox")
return false
}
}
}
//se esiste una sola chkbox spuntata prosegue nella verifica
if(max==1) {
verif3(n,nn2)
}
}
//funzione che verifica la selection list
function verif3() {
for(nnn=0;nnn<4;nnn++) {
//in caso di selezione si prosegue con la verifica successiva
if(document.form1.select1.options[nnn].selected) {
verif4(n,nn,nnn)
break
}
//senza opzioni selezionate l'invio del form si blocca
if(!document.form1.select1.options[nnn].selected && nnn==3) {
alert("Non hai selezionato\n un'opzione della lista")
return false
}
}
}
//funzione che verifica che la textbox non sia vuota
function verif4() {
txt1=document.form1.txt.value
if(txt1=="") {
alert("Non hai inserito del testo nella textbox")
return false
}
else {
verif5(n,nn,nnn,txt1)
}
}
//funzione che verifica che la passwordbox non sia vuota
function verif5() {
pwd1=document.form1.pwd.value
if(pwd1=="") {
alert("Non hai inserito una password nella passwordbox")
return false
}
else {
verif6(n,nn,nnn,txt1,pwd1)
}
}
//funzione che verifica che la textarea non sia vuota
function verif6() {
txta1=document.form1.txta.value
if(txta1=="") {
alert("Non hai inserito del testo nella textarea")
return false
}

Ma come faccio capire quanti indici hanno le check box, i selct, etc .. ?! :mbe: :confused:

Spero di non dire una cretinata, ma se non ricordo male c'è una funzione che ti restituisce tutti gli elementi del form. Quindi, ottenuto il numero di elementi, potresti usare un ciclo while all'interno del quale verifichi prima di tutto di che elemento si tratta (testo, checkbox, ecc) e poi verifichi le condizioni (es. casella di testo vuota, checkbox selezionata)

Matrixbob
06-07-2005, 13:39
Evento restituito dal JSP è un select.

<form name="inslavoro" method="post" action="02-next2.jsp" onSubmit="return CheckLavoro(this)">
<h3 align="left">Inserimento lavoro dell'autore</h3>
<p align="left">Titolo:<input type="text" name="titolo" size="32" maxlength="32" /></p>
<p align="left">Argomento:<input type="text" name="argomento" size="32" maxlength="32" /></p>
<p align="left">Pathfile del lavoro:<input type="text" name="path_file" size="32" maxlength="128" /></p>
<p align="left">Datatime di scaletta:<input type="text" name="data_scaletta" size="32" maxlength="32" /></p>
<jsp:include page = "evento-esistente.jsp" flush = "true" />
<p align="left"><input name="autore_id" type="hidden" value="<%= pageContext.getAttribute("autore_id") %>" /></p>
<p align="left"><input type="reset" value="Reset"/><input type="submit" value="Prosegui" /></p>
</form>

Questo non controlla niente, ma non resituisce errore. E' apatico e apssivo! :)

function CheckLavoro(form) {
// Variabili associate ai campi del modulo
var titolo = form.titolo.value;
var argomento = form.argomento.value;
var path_file = form.path_file.value;
var data_scaletta = form.data_scaletta.value;
var evento_nome = form.evento.value;

// Espressione regolare della data per la scaletta delle presentazioni http://web.tiscali.it/alexmfm/reg_exp.html
var data_scaletta_re = /^[0-9]{4}-[0-9]{1,2}-[0-9]{1,2}(\s[0-9]{1,2}:[0-9]{1,2}:[0-9]{1,2})?$/;

//Effettua il controllo sul campo TITOLO
if ((titolo == "") || (titolo == "undefined")) {
alert("Il campo Titolo è obbligatorio.");
form.titolo.focus();
return false;
}
//Effettua il controllo sul campo ARGOMENTO
else if ((argomento == "") || (argomento == "undefined")) {
alert("Il campo Argomento è obbligatorio.");
form.argomento.focus();
return false;
}
//Effettua il controllo sul campo PATH_FILE
else if ((path_file == "") || (path_file == "undefined")) {
alert("Inserire un Path_file nel formato 'c:\\\\dir\\\\file.ext'.");
form.path_file.focus();
return false;
}
//Effettua il controllo sul campo DATA_SCALETTA
else if (!data_scaletta_re.test(data_scaletta) || (data_scaletta == "") || (data_scaletta == "undefined")) {
alert("Inserire Data_scaltta nel formato 'AAAA-MM-GG' oppure 'AAAA-MM-GG hh:mm:ss'.");
form.data_scaletta.focus();
return false;
}
//Effettua il controllo sul campo EVENTO_NOME
else if ((evento_nome == "") || (evento_nome == "undefined")) {
alert("Il campo Evento è obbligatorio.");
form.evento_nome.select();
return false;
}
else return true;
}

DigitalKiller
06-07-2005, 14:41
Ho appena provato il tuo script, non mi ha dato nessun problema
Se usi firefox, prova ad utilizzare la console javascript per vedere eventuali errori :)

Matrixbob
06-07-2005, 15:12
Ho appena provato il tuo script, non mi ha dato nessun problema
Se usi firefox, prova ad utilizzare la console javascript per vedere eventuali errori :)
Ma quale script dici?!
Niente da fare, non è che è JSP che da fastidio?!
<jsp:include page = "evento-esistente.jsp" flush = "true" />

Il codice risoltante dal JSP è questo:

form name="inslavoro" method="post" action="02-next2.jsp" onSubmit="return CheckLavoro(this)">
<h3 align="left">Inserimento lavoro dell'autore</h3>
<p align="left">Titolo:<input type="text" name="titolo" size="32" maxlength="32" /></p>
<p align="left">Argomento:<input type="text" name="argomento" size="32" maxlength="32" /></p>
<p align="left">Pathfile del lavoro:<input type="text" name="path_file" size="32" maxlength="128" /></p>
<p align="left">Datatime di scaletta:<input type="text" name="data_scaletta" size="32" maxlength="32" /></p>








<p align="left">Evento:<select name="evento_nome">

</select></p>



<p align="left"><input name="autore_id" type="hidden" value="3" /></p>
<p align="left"><input type="reset" value="Reset"/><input type="submit" value="Prosegui" /></p>
</form>

100.000.000 di spazzi mi mette!!!!! :eek:
Adesso devi andare da mio nonno da bravo nipote, stasera spero in una svolta.:incazzed: :old:
Abbasso J2EE e abbasso JS. :nono:

DigitalKiller
06-07-2005, 15:33
Forse è proprio quello che da fastidio. Prova ad eliminarlo e vedi come va
Ciao