Campi obbligatori

[Jigen]

Sto tentando di rendere dei campi obbligatori ma credo di sbagliare qualcosa.
Chi sa indicarmi l'errore?

Questo è il codice:

<script language="javascript" type="text/javascript">
 <!--
  function Modulo() {

        if ((document.modulo.nome-azienda.value == "")) {
           alert("Il campo Nome Azienda è obbligatorio");
           document.modulo.nome-azienda.focus();
           return false;
        }

        else if ((document.modulo.nome-titolare.value == "")) {
          alert("Il campo Nome Titolare è obbligatorio");
          document.modulo.nome-titolare.focus();
          return false;
        }

        else if ((document.modulo.sede-azienda.value == "")) {
           alert("Il campo Sede Azienda è obbligatorio");
           document.modulo.sede-azienda.focus();
           return false;
        }
        
        else if ((document.modulo.telefono.value == "")) {
           alert("Il campo Recapito Telefonico è obbligatorio");
           document.modulo.telefono.focus();
           return false;
        }
        
        else if ((document.modulo.email.value == "")) {
           alert("Il campo E-mail è obbligatorio");
           document.modulo.email.focus();
           return false;
        }
        
        else if ((document.modulo.conferma.value == "")) {
           alert("Il campo Check-box è obbligatorio");
           document.modulo.conferma.focus();
           return false;
        }
		
        else {
           document.modulo.action = "mailto2.php";
           document.modulo.submit();
        }
  }
 //-->
</script>

  
<form method="post" name="modulo" action="mailto2.php">
<table border="0" bgcolor="#FAF6F6" cellspacing="2" cellpadding="2" width="435">
  <tr>
    <td width="175">

<span class="testo">Nome Azienda:</span></td>
    <td width="242" align="right">
	<input type="text" size="28" name="nome-azienda" class="box-form" maxlength="30"></td>
  </tr>
  
  <tr>
    <td width="175"><span class="testo">Nome Titolare:</span></td>

    <td width="242" align="right">
    <input type="text" size="28" name="nome-titolare" class="box-form" maxlength="30">
    </td>
  </tr>
  
  <tr>
    <td width="175"><span class="testo">Sede Azienda (città):</span></td>

    <td width="242" align="right">
    <input type="text" size="28" name="sede-azienda" class="box-form" maxlength="30">
    </td>
  </tr>
  
  <tr>
    <td width="175"><span class="testo">Recapito telefonico:</span></td>
    <td width="242" align="right">
	<input type="text" size="28" name="telefono" class="box-form" maxlength="30"></td>
  </tr>
  
  <tr>
    <td width="175"><span class="testo">E-mail:</span></td>
    <td width="242" align="right">
    <input type="text" size="28" name="email" class="box-form" maxlength="30">
    </td>
  </tr>
  
  <tr>
    <td width="175"></td>

    <td width="242" align="right">
      <p align="left"></p>
    </td>
  </tr>
  
  <tr>
    <td width="417" colspan="2">
      <p align="center"><input type="checkbox" name="conferma" value="ON"> 
      <span class="testo">
      Desidero essere contattato</span>
      </td>
  </tr>
  
  <tr>
  <td colspan="2" width="425"> 
    <p align="right"> <span class="copyright">
  
 (Tutti i campi sono obbligatori) 



  
  </span>
  
 
  <div align="center">
          <input type="button" value="Invia" onClick="Modulo()"> 
          <input type="reset" value="Annulla">
          
    </div>

  </td>
  </tr>

</table>
 </form>

Grazie!

[nuky]

L'errore è dato dal fatto che usi il trattino nell'attributo name dei campi. Puoi usare numeri, lettere è il trattino basso.
Inoltre non è corretto accedere alla form tramite name. Non è standard poi accederci scrivendo document.nomeCampo.
Devi assegnare un id alla form e accederci usando il metodo getElementById: document.getElementById("nomeCampo").
Esiste l'input di tipo submit, usalo e fai partire la routine di controllo sull'onsubmit della form. Così è formalmente corretto.
E usala una variabile in quello script!

Un appunto sull'accessibilità. Una tabella dentro ad una form è una schifezza, puoi ottenere lo stesso layout usando solo tag label e input, rendendo il codice accessibile, più leggero e leggibile.

<script language="javascript" type="text/javascript">
 <!--
  function Modulo() {
        var oModulo = document.getElementById("modulo");

        if ((oModulo.nome_azienda.value == "")) {
           alert("Il campo Nome Azienda è obbligatorio");
           oModulo.nome_azienda.focus();
           return false;
        }

        else if ((oModulo.nome_titolare.value == "")) {
          alert("Il campo Nome Titolare è obbligatorio");
          oModulo.nome_titolare.focus();
          return false;
        }

        else if ((oModulo.sede-azienda.value == "")) {
           alert("Il campo Sede Azienda è obbligatorio");
           oModulo.sede-azienda.focus();
           return false;
        }
        
        else if ((oModulo.telefono.value == "")) {
           alert("Il campo Recapito Telefonico è obbligatorio");
           oModulo.telefono.focus();
           return false;
        }
        
        else if ((oModulo.email.value == "")) {
           alert("Il campo E-mail è obbligatorio");
           oModulo.email.focus();
           return false;
        }
        
        else if ((oModulo.conferma.value == "")) {
           alert("Il campo Check-box è obbligatorio");
           oModulo.conferma.focus();
           return false;
        }
		
        else
           return true;
  }
 //-->
</script> 

<body>
<form method="post" id="modulo" action="mailto2.php" onsubmit="return Modulo();">
...
  <input type="text" size="28" name="nome_azienda" class="box-form" maxlength="30">
...
...
  <input type="submit" value="Invia"> 
...
</form> 
</body>

[Jigen]

Grazie per il tuo prezioso intervento, provvederò subito a correggere il codice.

Visto che ho delle lacune in tema di accessibilità, ti dispiacerebbe farmi vedere un esempio di tabella con label ed input?

Grazi ancora.

[nuky]

Originariamente inviato da Jigen
Grazie per il tuo prezioso intervento, provvederò subito a correggere il codice.

Visto che ho delle lacune in tema di accessibilità, ti dispiacerebbe farmi vedere un esempio di tabella con label ed input?

Grazi ancora.

Frena frena, non ho parlato di tabelle fatte con... ma di layout dei campi all'interno di una form impostato con.
E' un po' diverso.

Dai un'occhiata nelle discussioni utili del forum CSS.