PDA

View Full Version : [Javascript] Validare più form con un'unica funzione

Fabiorayden
26-09-2007, 17:34
Sto cercando di render il più generiche possibili alcune funzioni.
Ho alcune pagine con dei form con 2 o pocopiù campi da inviare ad altre pagine.

Con una funzione javascript (ctrl_form(val1,val2)) che si trova in un file esterno (funzioni.js) controllo che i campi non siano vuoti.

Se non ci sono errori faccio eseguire document.form1.submit();
Ovviamente ciò funziona solo con il form chiamato form1.

Se modificassi la funzione in modo da far passare anche il nome del form (ctrl_form(val1,val2,'nomeform')), c'è un modo per poter fare il submit di tale form?

Ciò mi permetterebbe di usare una sola funzione per validare una serie di form.
isAlreadyInUse
26-09-2007, 18:04
Puoi usare una funzione che ha come parametro solo il nome della form poi cicli su tutti gli elementi della form facendoti gli appositi controlli poi con document.getElementByID(idForm).submit() effettui il submit della form se tutto va bene.
andbin
26-09-2007, 20:23
Con una funzione javascript (ctrl_form(val1,val2)) che si trova in un file esterno (funzioni.js) controllo che i campi non siano vuoti.

Se non ci sono errori faccio eseguire document.form1.submit()Questa non è la soluzione migliore. Sarebbe preferibile usare l'evento onsubmit su <form>. Se i dati sono ok, si fa ritornare true per procedere con l'invio, altrimenti false per cancellare l'invio.

Ovviamente ciò funziona solo con il form chiamato form1.

Se modificassi la funzione in modo da far passare anche il nome del form (ctrl_form(val1,val2,'nomeform')), c'è un modo per poter fare il submit di tale form?

Ciò mi permetterebbe di usare una sola funzione per validare una serie di form.Avere una funzione più generica è possibile. Tra l'altro è anche possibile ottenere un array dei controlli contenuti in un form.
Ma se e come fare tale funzione, dipende da come sono fatti i tuoi form e dai vincoli che intendi applicare ai campi.
Insomma .... senza sapere come sono fatti e cosa vuoi controllare, neanche io saprei dirti di più.
Fabiorayden
27-09-2007, 08:32
Questa non è la soluzione migliore. Sarebbe preferibile usare l'evento onsubmit su <form>. Se i dati sono ok, si fa ritornare true per procedere con l'invio, altrimenti false per cancellare l'invio.

Avere una funzione più generica è possibile. Tra l'altro è anche possibile ottenere un array dei controlli contenuti in un form.
Ma se e come fare tale funzione, dipende da come sono fatti i tuoi form e dai vincoli che intendi applicare ai campi.
Insomma .... senza sapere come sono fatti e cosa vuoi controllare, neanche io saprei dirti di più.

La pagina dove c'è il form è strutturata così:


<form name="utente" method="post" action="dati_post.php?>
<table>
<tr>
<td>username</td>
<td><input type="text" name="nome"></td>
</tr>
<tr>
<td>password</td>
<td><input type="text" name="cognome"></td>
</tr>
</table>
<input type="button" onClick="javascript:ctrlForm(document.utente.nome.value,document.utente.cognome.value,'login');" value="invia">
</form>


Il terzo parametro che passo alla funzione ctrlForm vorrei che possa esser usato dalla funzione per validare il form, che sarebbe:


function ctrlForm(val1,val2,nomeform)
{
if(val1=="" || val2=="")
{
alert("Non hai inserito i dati");
}
else
{
document.utente.submit();
}
}

La funzione vale solo per il form chiamato utente, io cercavo un modo per poter passare nomeform al submit

Come già detto prima, se avessi un altro form che invia 2 dati (tipo indirizzo e città), potrei usare la stessa funzione, passando però il nome del form diverso (per esempio chiamato recapito)
isAlreadyInUse
27-09-2007, 08:36
function submitForm(idForm){
document.getelementById(idform).submit();
}
Fabiorayden
27-09-2007, 09:38
function submitForm(idForm){
document.getelementById(idform).submit();
}


Su Internet Explorer il codice funziona, su Firefox no (anche scrivendo getElementById, che sarebbe il modo corretto).

Non vorrei che occorre aggiunger qualcos'altro (ho notato che Safari non accetta alert("bla bla"); ma vuole document.alert("bla bla");
isAlreadyInUse
27-09-2007, 09:47
A me su Firefox funge..prova un po questo
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script language="javascript" type="text/javascript">
function validateForm(obj){
document.getElementById(obj).submit();
return false;
}
</script>
</head>
<body>
<form name="frm" id="frm" action="http://www.google.it" method="POST" onsubmit="return validateForm('frm');">
<input type="submit" value="ok">
</form>
</body>
</html>
Fabiorayden
27-09-2007, 10:01
A me su Firefox funge..prova un po questo
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script language="javascript" type="text/javascript">
function validateForm(obj){
document.getElementById(obj).submit();
return false;
}
</script>
</head>
<body>
<form name="frm" id="frm" action="http://www.google.it" method="POST" onsubmit="return validateForm('frm');">
<input type="submit" value="ok">
</form>
</body>
</html>

Grazie per l'aiuto, ora la validazione del form funziona, forse il problema era nel modo in cui facevo il submit.
Tra l'altro ho notato che l'alert su Safari funziona anche senza document., non so perché prima non funionava.
isAlreadyInUse
27-09-2007, 10:04
Evidentemente gli avrò messo paura :D
Buon lavoro
andbin
27-09-2007, 13:00
Se si vuole fare una funzione di validazione abbastanza "generica", si può fare così (nota, ho testato solo campi di tipo input text):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Prova</title>
<script type="text/javascript">
<!--
function validate (form_obj)
{
var i, control;

for (i = 0; i < form_obj.elements.length; i++)
{
control = form_obj.elements[i];

if (control.tagName == "INPUT" && control.getAttribute ("type") == "text")
{
if (control.value == "")
{
alert ("Non hai inserito tutti i dati");
return false;
}
}
}

return true;
}
//-->
</script>
</head>
<body>

<form method="post" name="form1" action="#" onsubmit="return validate(this)">
<input type="text" name="val1" value=""><br>
<input type="text" name="val2" value=""><br>
<input type="submit" value="INVIA">
</form>

<br>

<form method="post" name="form2" action="#" onsubmit="return validate(this)">
<input type="text" name="val1" value=""><br>
<input type="text" name="val2" value=""><br>
<input type="text" name="val3" value=""><br>
<input type="text" name="val4" value=""><br>
<input type="submit" value="INVIA">
</form>

</body>
</html>
Come si può vedere, è poi banalissimo applicare la validazione a più form.
Fabiorayden
27-09-2007, 13:32
La tua funzione risulta molto più generica della mia, grazie.
Io, che avevo un file con le funzioni javascript e un altro file con il codice html, per adesso ho risolto così:

pagina delle funzioni javascript:

function submitForm(val1,val2,idForm)
{
if(val1=="" || val2=="")
{
alert("Non hai inserito i dati");
}
else
{
document.getElementById(idForm).submit();
}
}

pagina html:

<form name="utente" id="utente" method="post" onsubmit="return submitForm(document.utente.nome.value,document.utente.cognome.value,'utente')" action="dati_post.php?r=<?php echo(r());?>">
<table>
<tr>
<td>username</td>
<td><input type="text" name="nome"></td>
</tr>
<tr>
<td>password</td>
<td><input type="text" name="cognome"></td>
</tr>
</table>
<input type="submit" value="invia">
</form>


Nel mio caso però all'aumentare dei campi di input da controllare dovrò ovviamente modificare la funzione.
Grazie per l'aiuto.
andbin
27-09-2007, 13:52
La tua funzione risulta molto più generica della mia, grazie.Allora puoi usarla (e modificarla) come vuoi. ;)

Io, che avevo un file con le funzioni javascript e un altro file con il codice html, per adesso ho risolto così:Sì ma dovresti far ritornare il true/false dalla funzione.
Fabiorayden
27-09-2007, 17:00
In effetti senza return la funzione javascript ha poco senso, per di più così com'era, generava su IE 2 submit :confused:
Questa è la versione corretta (tra l'altro non ho nebbeno bisogno di passare il nome del form):

function submitForm(val1,val2)
{
if(val1=="" || val2=="")
{
alert("Non hai inserito i dati");
return false;
}
else
{
return true;
}
}