Convalida di un form js con XHTML strict:
Il seguente articolo è stato testato sui seguenti browser:
- Internet explorer 7
- Mozilla Firefox 2
- Opera 9
Il linguaggio XHTML prevede alcune regole per la compilazione delle pagine che a volte possono creare non pochi problemi a chi sta cercando di convertire dal vecchio HTML.
Uno dei problemi è quello di far convalidare una pagina dove è presente un form manipolato da javascript.
In effetti alcuni script prevedono l'utilizzo del form ricavando direttamente le variabili tramite il loro nome (name=".....").
Questa procedura non è consentita durante la convalida XHTML STRICT.
La soluzione viene dallo stesso javascript, che mette a disposizione del programmatore un'altro metodo per ricavare il valore delle variabili e modificarlo a proprio piacimento.
In pratica posiamo arrivare al campo del form indicando il numero del form (dall'inizio pagina), ed il numero del campo (dall'inizio del form).
Esempio con HTML:
Immaginiamo di dover creare un form che moltiplichi per 5 il valore immesso in un campo, e faccia apparire nello stesso campo il risultato.Apparentemente è uno script molto semplice, il codice HTML/JAVASCRIPT potrebbe essere il seguente:
<script type="text/javascript">
<!--
function moltiplica(){
document.h.aw.value=document.h.aw.value*5
}
-->
</script>
<form name="h" action="#">
<input size="3" name="aw">
<input onclick=moltiplica(); type="button" value="Moltiplica x 5">
</form>
<!--
function moltiplica(){
document.h.aw.value=document.h.aw.value*5
}
-->
</script>
<form name="h" action="#">
<input size="3" name="aw">
<input onclick=moltiplica(); type="button" value="Moltiplica x 5">
</form>
In pratica funziona su tutti i browser, ma se proviamo a convalidare il form in XHTML STRICT otteniamo un errore come questo:
there is no attribute "name".
In sostanza se vogliamo far convalidare la pagina come XHTML STRICT dobbiamo trovare una strada alternativa all'attributo name="".Possiamo scrivere
<form id="h" action="#">
ERRATO perchè funziona con Internet Explorer ma non funziona con Firefox.Metodo js alternativo
Per utilizzare i campi del form senza dichiararne il nome, javascript ci aiuta permettendoci di arrivare al campo del form dichiarando semplicemente a quale form (da inizio pagina) e a quale campo form (dall'inizio del form) ci stiamo riferendo. In pratica non necessitiamo di nessun nome.Questo è il risultato che otterremo mettendo in pratica quello appena detto:
Questo è il codice:
<script type="text/javascript">
<!--
function moltiplica(){
document.forms[2].elements[0].value=document.forms[2].elements[0].value*5
}
-->
</script>
<form action="#">
<div>
<input size="3" />
<input onclick="moltiplica();" type="button" value="Moltiplica x 5" />
</div>
</form>
<!--
function moltiplica(){
document.forms[2].elements[0].value=document.forms[2].elements[0].value*5
}
-->
</script>
<form action="#">
<div>
<input size="3" />
<input onclick="moltiplica();" type="button" value="Moltiplica x 5" />
</div>
</form>
Come potrete notare non abbiamo dichiarato nessun nome all'interno del form, ma lo script funziona con tutti i browser ed è compatibile con le direttive XHTML STRICT.
La riga che riesce ad arrivare ai dati è la seguente:
document.forms[2].elements[0].value
Nel nostro caso il form è il numero 2 (il terzo partendo da zero, dopo quello di ricerca in alto a destra e quello di ricerca a fianco delle icone stampa e fumetto).Mentre per il campo form è il numero 0, ossia il primo dopo il tag form.