Validazione form

**GiH** · 21-03-2009, 16:28

Ciao a tutto il forum!
Ho un form, contenente dei campi che devo validare.
La validazione non è un problema, ma quanto piuttosto l'esito della validazione!
Vorrei infatti che, ad esempio, inserendo un dato non valido nel campo "email", a lato della casella di input spunti un'immaginetta e un messaggio. Pensavo di giocare con visible/hidden, ma sono alle prime armi con js!
Questo è un primordiale progetto per la maturità, aiutatemi a diplomarmi per favore!

Grazie mille in anticipo.

PS: ecco a voi il codice della pagina dove vorrei eseguire il tutto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" media="all" href="./css/layout.css" type="text/css" >
<link rel="stylesheet" type="text/css" media="all" href="./css/form_layout.css" >
<script type="text/javascript">
function checkEmail(inputvalue){
var pattern=/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
if(pattern.test(inputvalue)){
alert("true");
return true;
}else{
alert("false");
return false;
}
}

</script>
</head>
<body>
<div id="container">
<div id="top">
[img]./css_immagini/header.PNG[/img]
</div>
<div id="leftnav">
<ul>[*]Inviare una e-mail cifrata[*]Decriptare una e-mail cifrata[/list]
</div>
<div id="content">

<div id="form">
<form action="formmail.php" method="post" class="niceform" name="signupform" onSubmit="return checkEmail(document.signupform.s_email.value)">
<fieldset>
<legend>Inviare una e-mail cifrata</legend>
<dl>
<dt><label for="email">Email Address: (Sender)</label></dt>
<dd><input type="text" name="s_email" id="s_email" size="32" maxlength="128" /></dd>
</dl>
<dl>
<dt></dt>
<dd><input type="submit" name="submit" id="submit" value="Submit" ></dd>
</dl>
</fieldset>

</form>
</div>
</div>
<div id="footer">
Footer!
</div>
</div>
</body>
</html>

**kayne** · 21-03-2009, 20:21

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Form</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" media="all" href="./css/layout.css" type="text/css" >
    <link rel="stylesheet" type="text/css" media="all" href="./css/form_layout.css" >
    
    <style>
      .error{
        border : 1px solid red;
      }
      
      #error_div{
        color: red;
        display: inline;
        visibility: hidden;
        vertical-align : middle;
      }
      
    </style>
    
    <!--[if lt IE 7]>
     <style type="text/css">
     .error_img { 
        vertical-align : middle;     
        behavior: url(iepngfix.htc) }
     </style>
    <![endif]-->
    
    <script type="text/javascript">
      function checkEmail(inputvalue){
        var pattern=/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
        if(pattern.test(inputvalue)){
          alert("true");
          return true;
        }else{
          
          //alert("false");
          var domEl = document.getElementById('s_email');
          if(!domEl.className)
            domEl.className = "error";
          else{
            domEl.className = domEl.className + " error";
          }
          document.getElementById("error_div").style.visibility = 'visible';
          
          return false;
        }
      }
    </script>
  </head>
  <body>
    <div id="container">
      <div id="top">
        [img]./css_immagini/header.PNG[/img]
      </div>
      <div id="leftnav">
        <ul>[*]Inviare una e-mail cifrata[*]Decriptare una e-mail cifrata[/list]
      </div>
      <div id="content">
      

      

      <div id="form">
      <form action="formmail.php" method="post" class="niceform" name="signupform" onSubmit="return checkEmail(document.signupform.s_email.value)">
        <fieldset>
          <legend>Inviare una e-mail cifrata</legend>
          <dl>
          <dt><label for="email">Email Address: (Sender)</label></dt>
          <dd><input type="text" name="s_email" id="s_email" size="32" maxlength="128" />

                <div id="error_div">
                 
                 Inserire un indirizzo email valido
                </div>

          </dd>
                
          </dl>
          <dl>
          <dt></dt>
          <dd><input type="submit" name="submit" id="submit" value="Submit" ></dd>
          </dl>
        </fieldset>
      </form>
      </div>
      </div>
      <div id="footer">
      Footer!
      </div>
    </div>
  </body>
</html>

in grassetto ho messo le aggiunte al tuo codice

EDIT : modificato, avevo dimenticato la scritta e la gestione delle png per IE6
(
l'immagine la prende da internet in questo caso se la tua immagine non è una png il problema non si pone nemmeno ma per sicurezza te l'ho fatta nel caso non lo sapessi :
iepngfix.htc è uno script che puoi scaricare da qui : ftp.daum.net/eclipse/eclipse.org-common/themes/Phoenix/iepngfix.htc imposta il percorso di una gif 1px*1px

spero di non averti confuso le idee nel caso non lo sapessi ma ho cercato di essere esaustivo
)

**GiH** · 22-03-2009, 01:49

kayne grazie mille! hai risolto perfettamente il mio problema!

**AlexClass** · 22-03-2009, 23:53

ciao a tutti, sono entrato da poco in questo mondo e ho fatto un piccolissimo passo riuscendo a mettere sù un form email cosi composto......

Quello che non riesco a fare è allineare il tutto e soprattutto verificare in automatico la correttezza dei dati o l' obbligo di inserire i dati....
Poi mi piacerebbe che chi invia la mail avesse una pagina di risposta.....ho letto tato ma non sono espertissimo.....

Potreste darmi una mano?
Grazie a tutti....

questo è il mio codice:

<body>
<body class="pagina">

<script language="JavaScript">
function redirect()
</script>
<form METHOD="POST" ACTION="mailto:MIA MAIL?subject=modulo eventi" ENCTYPE="text/plain">
<form method="post" name="modulo">
<tr>
<td colspan="2" align="center">Tutti i campi sono obbligatori</td>
</tr>

<tr>
<td>Nome</td>
<td><input type="text" name="nome"></td>
</tr>

<td>Cognome</td>
<td><input type="text" name="cognome"></td>
</tr>

<tr>
<td>Data di nascita (es: 12/04/1978)</td>
<td><input type="text" name="nascita"></td>
</tr>

<tr>
<td>data appuntamento</td>
<td>
<select name="data appuntamento">
<option>- Seleziona la tua data -</option>
<option value="06 Aprile">06 Aprile</option>
<option value="20 Aprile">20 Aprile</option>
<option value="27 Aprile">27 Aprile</option>
<option value="04 Maggio">04 Maggio</option>
</select>
</td>
</tr>

<tr>
<td>ora appuntamento</td>
<td>
<select name="ora appuntamento">
<option>- Seleziona il tuo orario -</option>
<option value="h.13,00">h.13,00</option>
<option value="h.13,30">h.13,30</option>
<option value="h.14,00">h.14,00</option>
<option value="h.14,30">h.14,30</option>
<option value="h.15,00">h.15,00</option>
<option value="h.15,30">h.15,30</option>
<option value="h.16,00">h.16,00</option>
<option value="h.16,30">h.16,30</option>
<option value="h.17,00">h.17,00</option>
</select>
</td>
</tr>

<tr>
<td>Telefono (senza spazi nè simboli)</td>
<td><input type="text" name="telefono"></td>
</tr>

<tr>
<td>Email</td>
<td><input type="text" name="email"></td>
</tr>

<tr>
<td colspan="2">messaggio</td>
</tr>

<tr>
<td colspan="2" align="center">
<textarea name="messaggio" rows="5" cols="32"></textarea>
</td>
</tr>

<tr>
<td colspan="2">Sulla base delle disposizioni della Legge 31/12/1996 n. 675 art. 10, Class si impegna a non diffondere i dati sopra inseriti ed a utilizzarli
esclusivamente all'interno dell'Azienda per le attività di servizi e comunicazioni
inerenti alle iniziative del sito.</td>

<td><tr>
<td colspan="2" align="center">
<input type="radio" name="privacy" value="accetto" checked>accetto
<input type="radio" name="privacy" value="non accetto">non accetto
</td>
</tr>

</tr>

<div>
<pre>
<input TYPE="SUBMIT" VALUE="Invia" onclick="redirect();5000";> <input TYPE="RESET" VALUE="reset">
</pre>
</div>
</blockquote>
</form>

</body>

**cavicchiandrea** · 23-03-2009, 00:21

Definisci automatico e non riesco a fare è allineare il tutto!!
Appoggiandoti sul programma di posta dell'utente poi avere (forse mai provato) reindirizzare solo ad una pagina "di ringraziamenti" generica anche se l'invio non è avvenuto.
Ciao e benvenuto sul forum.

**AlexClass** · 23-03-2009, 00:26

grazie mille.... anche per il benvenuto....
non riesco ad allineare le caselle di testo e il testo all' interno del mio sito ....
Giusto, reindirizzare il cliente ad una pagina di ringraziamenti per l' invio email e dopo pochi secondi che torni alla pagina iniziale......

Mannaggia devo scappare a lavorare....ho il turno di notte.....

Spero che mi aiutate.....
grazie ancora

Discussione: Validazione form

Strumenti discussione

Ricerca discussione

Visualizza

Validazione form

Permessi di invio