Output error-messsages su immissione in form

**FastMagister** · 14-12-2007, 13:25

Ciao a tutti,

volevo chiedervi se quando si controllano con Javascript i valori immessi tramite un form sia possibile dare in output gli eventuali messaggi di errore sulla stessa pagina dove risiede il form (magari con testo in rosso) e non nella solita finesta che si apre quando chiamo la funzione alert.

Qualcuno potrebbe fornirmi qualche banale esempio?

Grazie,

**FastMagister** · 19-12-2007, 14:46

Allora,

dopo aver abbondantemente ricercato e provato ne è venuto fuori questo:

codice:

<html>
          <head>
                    <script>
                          function controlla(campo, errore)
                          {
                              var ricerca = document.getElementById(campo).value;
                              var el = document.getElementById(errore);
                              if(ricerca=="")
                              {
                                 el.style.display = "block";
                                 el.innerHTML="errore: hai inserito il campo vuoto";
                                 return false;
                              }
   
                              if(!ricerca.match(/^\d+([\.]\d*)?$/))
                              {
                                 el.style.display = "block";
                                 el.innerHTML="errore: hai inserito caratteri vietati,sono ammesse solo cifre ed il punto!";
                                 return false;
                              }
                              return true;
                          }					
                    </script>
          </head>
          <body>
                    <form name="MyForm" ACTION="http://localhost/cgi-bin/xxx.cgi" method="POST">
                        <input type="text" name="mytext" id="mytext" onBlur="return controlla('mytext', 'errore1');">
                        <font color="red" size="1"><div id="errore1" style="display: none;">
 </div></font>


                        <input type="text" name="mytext2" id="mytext2" onBlur="return controlla('mytext2', 'errore2');">
                        <font color="red" size="1"><div id="errore2" style="display: none;">
 </div></font>


                        <input type="SUBMIT" VALUE="Calculate">
                        <input type="reset" value="Reset">
							     
                    </form>
          </body>
</html>

Ci sono quasi, ma quello che proprio non riesco a fare è evitare che, nel caso di scrittura di un error message, il layout della pagina "cambi": di fatto il messaggio viene scritto nello spazio bianco che ho lasciato tra i campi, ma mi "spinge" comunque verso il basso tutto il restante contenuto della pagina; in pratica inserisce una riga bianca di troppo...
Ho anche provato a sostituire il tag <div> con il tag <span> ma il risultato è il medesimo...

Suggerimenti in merito...?

Ciao, grazie

**deleted_110** · 19-12-2007, 19:58

Il fatto e' che modifichi la proprieta' css 'display' del tuo div. facendolo apparire mentre prima era nascosto.

La soluzione piu' (IMHO) semplice e' impostare un'altezza fissa del tuo div coi css e NON impostare style="display: none;"

Oppure riempi il tuo div con degli spazi. Poco elegante ma efficace

**FastMagister** · 19-12-2007, 20:09

Originariamente inviato da raven74
Oppure riempi il tuo div con degli spazi. Poco elegante ma efficace

Mi sa che è questa la strada che dovro' percorrere... ma precisamente come dovrei fare?

**deleted_110** · 19-12-2007, 20:18

Una cosa del genere: ho tolto il

codice:

display: none;

e ho fissato l'altezza del div a 20 pixel (arbitrario, impostala come ti piace di piu')

codice:

<font color="red" size="1"><div id="errore1" style="height: 20px;"> </div></font>

dimmi se va, non lo ho provato

**FastMagister** · 20-12-2007, 11:29

funge benissimo, grazie

Solo un'altra domanda: richiamando controlla() con onBlur sui campi, piuttosto che con onSubmit sul pulsante SUBMIT , anche in caso di input errato e di conseguente messaggio d'errore, alla pressione del tasto SUBMIT il browser caricherà comunque la pagina successiva e, di fatto, non sarà "bloccato" in caso d'errore...

Avevo provato a rimediare così, aggiungendo una variabile booleana globale, ma sebbene la logica sembri buona, di fatto non funziona:

codice:

<html>
          <head>
                    <script>
                          var corretto = false;
                          
                          function submit()
                          {
                               return corretto;
                          }
						  
                          function controlla(campo, errore)
                          {
                              var ricerca = document.getElementById(campo).value;
                              var el = document.getElementById(errore);
                              if(ricerca=="")
                              {
                                 el.style.display = "block";
                                 el.innerHTML="errore: hai inserito il campo vuoto";
                                 corretto = false;
                              }
   
                              if(!ricerca.match(/^\d+([\.]\d*)?$/))
                              {
                                 el.style.display = "block";
                                 el.innerHTML="errore: hai inserito caratteri vietati,sono ammesse solo cifre ed il punto!";
                                 corretto = false;
                              }
                              corretto = true;
                          }					
                    </script>
          </head>
          <body>
                    <form name="MyForm" ACTION="http://localhost/cgi-bin/xxx.cgi" method="POST" onsubmit="return submit();">
                        <input type="text" name="mytext" id="mytext" onBlur="return controlla('mytext', 'errore1');">
                        <font color="red" size="1"><div id="errore1" style="height: 10px;"> </div></font>

                        <input type="text" name="mytext2" id="mytext2" onBlur="return controlla('mytext2', 'errore2');">
                        <font color="red" size="1"><div id="errore2" style="height: 10px;"> </div></font>

                        <input type="SUBMIT" VALUE="Calculate">
                        <input type="reset" value="Reset">
							     
                    </form>
          </body>
</html>

Suggerimenti...?

**deleted_110** · 20-12-2007, 11:41

Non puoi richiamare la funzione sia sull'onBlur che sull'onSubmit?

Oppure fai un tasto "Invia" che richiama la funzione sull'onclick e...

codice:

if corretto==true
    form.submit();

**FastMagister** · 20-12-2007, 12:23

Originariamente inviato da raven74
Non puoi richiamare la funzione sia sull'onBlur che sull'onSubmit?

Per come è stata scritta, controlla() non la posso chiamare sull' onSubmit: che parametri dovrei passargli...?

Per questo ho scritto l'altra funzione, submit(), che doveva avere un compito banale, ritornare il valore di una variabile booleana, ma evidentemente c'è qualcosa che non va e che non capisco...

E' questa comunque la strada che preferirei percorrere, "aggiustare" questa funzione submit().

In alternativa:

Originariamente inviato da raven74
Oppure fai un tasto "Invia" che richiama la funzione sull'onclick e...

codice:

if corretto==true
    form.submit();

Il tasto "Invia" sarebbe quello che io ho etichettato con "Calculate", ma è di tipo "TYPE=SUBMIT". Posso sfruttare questo? Non ho ben capito dove dovrei mettere quelle due righe di codice...

P.s.: in ogni caso grazie 1000 per l'aiuto...

**deleted_110** · 20-12-2007, 12:36

Originariamente inviato da FastMagister

figurati...

dunque crea un tasto che non sia di tipo submit

codice:

<input type="button" name="INVIA" onClick="javascript:invia()>"

e poi crei la funzione invia()

codice:

function invia()
{
if (corretto==true)
    document.MyForm.submit();
}

cosi' dovrebbe andare (piu' o meno).

Per raffinare la cosa potresti fare anche cosi': modificare la funzione invia() affinche' cicli tutti gli elementi della form e per ognuno di essi controlli la validita'

tipo cosi'

controlla('mytext', 'errore1')

codice:

function invia()
{
mytext = document.getElementById("mytext").
mytext.controlla(mytext, "errore1");

mytext2 = document.getElementById("mytext2").
mytext2.controlla(mytext2, "errore2");

// eccetera... se i campi sono molti si puo' fare un cicol for

if (corretto==true)
    document.MyForm.submit();
}

ho improvvisato... probabile ci siano errori

**FastMagister** · 20-12-2007, 18:23

In effetti qualcosa che non va ci dovrebbe essere (parlo della prima soluzione...) poichè una volta creato il tasto INVIA ed associatagli la funzione invia() con onClick di fatto il browser non va alla pagina seguente ne in caso di input corretto ne in caso di input errato....

Discussione: Output error-messsages su immissione in form

Strumenti discussione

Ricerca discussione

Visualizza

Output error-messsages su immissione in form

Permessi di invio