COntrollo form al volo

[[ks]furlo]

Ho un problema con IE7...
Ho creato un controllo della form con JS, il codice da me utilizzato è il seguente

function changeClass(id) {
if ( document.getElementById(id).className == "off" )
document.getElementById(id).className = "on";
else
document.getElementById(id).className = "off";
}

//controlla se la form è valida
function controllaNews(element) {
var re = / /g;
var regEspr = /^[_a-z0-9+-]+(\.[_a-z0-9+-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)+$/;
//Salvo i campi e controllo se è un blank
var email = element.email_newsletter.value.replace(re,'');
var idEmail = element.email_newsletter.name;
if ( email == "" ) {
if ( email == "" && document.getElementById(idEmail).className == "off" )
changeClass(idEmail);
return false;
}

if ( email != "" && !regEspr.test( email ) ) {
if (document.getElementById(idEmail).className == "off")
changeClass(idEmail);
return false;
}
}

function controllaCampoNews(element) {
var re = / /g;
var objValue = element.value.replace(re,'');
if ( objValue != "" && document.getElementById(element.name).className != "off" ) changeClass(element.name);
}

Adesso metto il codice HTML

<form action="<?php echo $PHP_SELF ?>?l=<?php echo LINGUA?>" method="post" onsubmit="return controllaNews(this)">
<table cellpadding="0" cellspacing="0" width="100%">
<tr><td colspan="3">[img]images/spacer.gif[/img]</td></tr>
<tr>
<td valign="middle" width="20%"><label><?php echo $news["email"][LINGUA] ?></label></td>
<td width="70%"><input id="news_off" type="text" name="email_newsletter" maxlength="50" value="<?php echo $email_newsletter?>" class="text_news" onkeyup="controllaCampoNews(this)"/></td>
<td width="10%" valign="middle" align="center"><div id="email_newsletter" class="off">[img]images/template/warning.png[/img]</div></td>
</tr>
<tr><td>[img]images/spacer.gif[/img]</td></tr>
<tr>
<td>[img]images/spacer.gif[/img]</td>
<td colspan="2" style="padding-right: 39px;" align="right"><input type="submit" value="<?php echo $news["bottone"][LINGUA] ?>" class="button_news"/></td>
</tr>
</table>
</form>

Con Firefox funziona con IE8 Funziona, ma con il 7 no...

[[ks]furlo]

Ps mi sono dimenticato di dire che

div.off {visibility: hidden}
div.on {visibility: visible}

[cavicchiandrea]

<input id="news_off" type="text" name="email_newsletter"
<div id="email_newsletter"
Non usare nomi e id uguali per oggetti diversi

[[ks]furlo]

L idea è proprio quella così posso gestire quanti campi voglio... Basta solo che il div contente immagine di alert abbia l'id uguale al name del campo form

[cavicchiandrea]

Originariamente inviato da [ks]furlo
L idea è proprio quella così posso gestire quanti campi voglio... Basta solo che il div contente immagine di alert abbia l'id uguale al name del campo form

Ok, a discapito di non farlo funzionare con ie7 (e precedenti credo) visto che non fa distinzione tra name e id che se usati nello stesso tag o elemento non ci sono problemi ma se fai come hai fatto tu utilizzandoli per due oggetti diversi il browser si trova due id/name uguali nel documento e non sa + che fare.

[[ks]furlo]

Però la cosa che non capisco è che: I tag dovrebbero essere ben distinti, infatti con Mozilla o IE8 funziona tutto alla perfezione, mentre con ie7 no... Se è vero quello che tu mi dici anche con firefox o ie8 allora non dovrebbe andare!!!

[cavicchiandrea]

Originariamente inviato da [ks]furlo
Però la cosa che non capisco è che: I tag dovrebbero essere ben distinti, infatti con Mozilla o IE8 funziona tutto alla perfezione, mentre con ie7 no... Se è vero quello che tu mi dici anche con firefox o ie8 allora non dovrebbe andare!!!

No, come ho già detto e ribadito è solo fino alla versione 7 di IE a non distinguere id da name tutti gli altri browser (compreso la versione 8 di IE) si attengono agli standard e distinguono l' id dal name, io meglio di cosi non so spiegartelo.


P.S. In sintesi o cambi l'id del div o cambi il name del input oppure non funziona con le versioni precedenti di IE 8

[[ks]furlo]

Ok... Grazie mille... Allora provvederò...

Grazie ancora