javascript, form e validazione xhtml 1.1

**elevation** · 23-02-2006, 20:30

ciao a tutti,
sto facendo qualche esperimento in ajax utilizzando la libreria moo.ajax.

ho creato questo script sbirciando anche la guida di Prototype. Funziona benissimo solo che il validatore W3C mi segnala diversi errori. In particolare riguardo l'attributo "name" del form...e la chiamata della function sull'On Change della select...come posso mantenere la funzionalità dello script e al tempo stesso avere una pagina senza errori a livello di xhtml?

ecco gli errori:

# Line 31 column 29: required attribute "action" not specified.

<form name="prova" id="prova">

✉
# Error Line 32 column 70: document type does not allow element "select" here; missing one of "ins", "del", "h1", "h2", "h3", "h4", "h5", "h6", "p", "div", "address", "fieldset" start-tag.

...ees" id="lstEmployees" onchange="searchSales()">

ecco la pagina:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="all" />
<title>prova</title>
<script type="text/javascript" src="prototype.lite.js"></script>
<script type="text/javascript" src="moo.ajax.js"></script>

<script>
function searchSales() {
var empID = document.prova.lstEmployees.options[document.prova.lstEmployees.selectedIndex].value;
//var y = 'lstYears';
var url = 'ajaxteam2.asp';
var pars = 'team=' + empID;
new ajax (
url,
{postBody: pars, update: $('result'), onComplete: showResponse}
);
}

function showResponse(request) {
//put returned XML in the textarea
$('result').value = request.responseText;
}
</script>
</head>
<body>
<form name="prova" id="prova">
<select name="lstEmployees" id="lstEmployees" onchange="searchSales()">
<option value="4">UNO</option>
<option value="3">DUE</option>
<option value="1">tre</option>
</select>
</form>
<div id="result">
questo testo sarà sostituito dal contenuto restituito dalla pagina asp.
</div>

</body></html>

**Mich_** · 24-02-2006, 10:33

Hai scelto un linguaggio molto evoluto, che non perdona nulla.

Comunque la sintassi da XHTML 1.0 Strict in poi e` molto rigida, e segue le norme di XML.

Dato che il problema e` di sintassi di XHTML, ti sposto nella sezione CSS e XHTML, e ti invito a fare una ricerca li`: i tuoi problemi sono stati gia` affrontati e risolti.

Nota che i primi due <script> potrebbero venire ignorati dai browser (tag che non contiene nulla), mentre il terzo non puoi inserirlo in quel modo: script e CSS non possono far parte del codice HTML.

**serialkiller** · 24-02-2006, 10:44

Come detto da Mich, in xhtml 1.1 esistono restrizioni in +, tipo appunto il non poter usare "name" ma si fa riferimento al suo "id".

per il js io di solito lo metto come file esterno.js

**elevation** · 24-02-2006, 12:55

ho messo l'id alla select e tolto il form...
il mio problema è che il validatore segna come errore l'evento onchange abbinato alla select...ho provato a mettere
document.getElementById('lstEmployees').onchange = searchSales();

nell'<head> della pagina al caricamento ma ovviamente mi esegue l'evento onchange solo ad ogni refresh..e trattandosi di ajax non è praticabile...

idee?

**Mich_** · 24-02-2006, 13:03

Quale validatore?
Non mi risulta esserci un validatore JS, e d'altronde se un validatore ha torvato una stringa JS hai fatto l'errore di includerla in un file HTML.

Comunque in quella riga c'e` pure un errore JS: la chiamata alla funzione non deve avere la parentesi, in quel contesto.

**edy72** · 25-02-2006, 18:32

ciao elevation,

riferendomi al primo codice che hai postato, l'errore segnalato dal validatore non è dovuto all'evento javascript sull'On Change della select, ma al fatto che il tag select non può essere figlio diretto di form, ma deve essere contenuto ad esempio in un div (inoltre dovresti indicare un action per il form):

codice:

<form id="prova" action="devi mettere anche un action">
<div> 
<select name="lstEmployees" id="lstEmployees" onchange="searchSales()">
<option value="4">UNO</option>
<option value="3">DUE</option>
<option value="1">tre</option>
</select>
</div> 
</form>

ciao!!

**serialkiller** · 25-02-2006, 18:46

Originariamente inviato da edy72
ciao elevation,

riferendomi al primo codice che hai postato, l'errore segnalato dal validatore non è dovuto all'evento javascript sull'On Change della select, ma al fatto che il tag select non può essere figlio diretto di form, ma deve essere contenuto ad esempio in un div (inoltre dovresti indicare un action per il form):

codice:

<form id="prova" action="devi mettere anche un action">
<div> 
<select name="lstEmployees" id="lstEmployees" onchange="searchSales()">
<option value="4">UNO</option>
<option value="3">DUE</option>
<option value="1">tre</option>
</select>
</div> 
</form>

ciao!!

ma stai scherzando ?

io ho millemila form con select senza div e nessun problema in xhtml 1.1 al massimo se vuoi un form conforme, metti il <fieldset><legend> e <label> al loro posto.

Poi la DTD è xhtml 1.1 e non accetta l'attributo "name" ma solo "id", idem nel tag <form>, mentre mancano "action" e "method"

codice:

<form id="prova" action="" method="post">

<fieldset>

<legend>la mia select</legend>

<label for="lstEmployees"></label>

<select id="lstEmployees" title="la mia select" tabindex="1" onchange="searchSales()">

<option value="4">UNO</option>
<option value="3">DUE</option>
<option value="1">TRE</option>

</select>

</fieldset>

</form>

**edy72** · 25-02-2006, 22:31

@Serial Killer

ma stai scherzando ?

no, non sto scherzando: ho solo detto (giustamente...perché ho ripreso quello dice il W3C) che il <select> non può essere figlio diretto di <form>, ma deve essere contenuto in un altro elemento ad esempio <div>. Il che vuol dire che si può usare <div> o anche un altro elemento come hai segnalato tu.

L'esempio che ho postato è validato sul sito del W3C (ovviamente inserendo l'attributo action corretto) e mi sembrava che era quello che mancava a elevation per validare il suo lavoro.

Discussione: javascript, form e validazione xhtml 1.1

Strumenti discussione

Ricerca discussione

Visualizza

javascript, form e validazione xhtml 1.1

annidamento

Re: annidamento

[OT] Re: Re: annidamento

Permessi di invio