Ciao ragazzi,
vorrei usare due eventi onblur su una form che eseguono

1) Controllo sintattico su input e modifica colore del div --> http://www.extrowebsite.com/lab/arti...focus_form.htm
2) Inserimento di un messaggio per ogni input --> http://www.askthecssguy.com/examples...example06.html

Con il codice che posto di seguito, funziona il punto 1), se tolgo il codice presente dopo la scritta "Cancella da qui fino a prima di ..."

Chiaramente questo dipende dall'essere poco pratico con javascript e sicuramente mi sfugge qualcosa, anche di banale.

Mi potete dare qualche suggerimento?
(il problema di allineamento CSS al momento non e' importante)

Grazie in anticipo

QUi il codice html/javascript
Codice PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it" dir="ltr">
<head>
<title>Stato :focus su elementi form</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
@import url(stile.css);
</style>
<script type="text/javascript"><![CDATA[//><!--

function validarEntero(valor){
    //intento convertir a entero.
    //si era un entero no le afecta, si no lo era lo intenta convertir
    valor = parseInt(valor)

    //Compruebo si es un valor numérico
    if (isNaN(valor)) {
       //entonces (no es numero) devuelvo el valor cadena vacia
       return ""
    }else{
       //En caso contrario (Si era un número) devuelvo el valor
       return valor
    }
}

function sel(id) {
      if (!document.getElementById) return;
          selDiv = document.getElementById(id);
          selDiv.style.backgroundColor = "#fff";
        selDiv.style.borderColor = "black";
}

function des(id,valore) {
      if (!document.getElementById) return;

     if (valore.value!=""){

          // ParteMia: A seconda del nome del campo occorre
         // fare diversi controlli
         // La seguente if e' di esempio
         if (valore.name=="emai"){
             //alert(valore.name);
         }

         enteroValidado = validarEntero(valore.value)

         if (enteroValidado == ""){
                selDiv = document.getElementById(id);
                selDiv.style.borderColor = "red";
                selDiv.style.backgroundColor = "#fff";
         }else{
                // ParteMia: Nel caso che il valore e' corretto 
                // cambio il colore del bordo
                selDiv.style.borderColor = "green";
                selDiv.style.backgroundColor = "#fff";
        }
    }
    else{
        // ParteMia: Questo serve per ripristinare il bordo normale di un input
        // nel caso in cui il precedente e' da correggere
        // togliendo questo succede che rimane il bordo evidenziato in nero come
        // se si sta per scrivere

        selDiv.style.borderColor = "#73848C";
    }
}


function check_form(f){
    var msg="Attenzione! Sono stati rilevati i seguenti errori:\n";
    var email_pattern=/^\w+@([\w.])+\w+$/;    
    var error=false;

    if(f.nome.value=="") {
        msg=msg+"\n Campo nome obbligatorio.";
                error=true;
        }
        else if (isNaN(f.nome.value)) {
                msg=msg+"\n Il campo deve essere numerico.";
                error=true;
            }

    if(f.emai.value=="") {
        msg=msg+"\n Campo email obbligatorio.";
                error=true;
        }
        else if(!email_pattern.test(f.emai.value)){
                msg=msg+"\n Campo e-mail non corretto.";
                error=true;
            }

    if(error){
        window.alert(msg);
        return false;
        }
    else{

    }
}

// CANCELLARE DA QUI FINO A </SCRIPT>
// per far funzionare il primo onblur

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function prepareInputsForHints() {
    var inputs = document.getElementsByTagName("input");
    for (var i=0; i<inputs.length; i++){
        // test to see if the hint span exists first
        if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
            // the span exists!  on focus, show the hint
            inputs[i].onfocus = function () {
                this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
            }
            // when the cursor moves away from the field, hide the hint
            inputs[i].onblur = function () {
                this.parentNode.getElementsByTagName("span")[0].style.display = "none";
            }
        }
    }
    // repeat the same tests as above for selects
    var selects = document.getElementsByTagName("select");
    for (var k=0; k<selects.length; k++){
        if (selects[k].parentNode.getElementsByTagName("span")[0]) {
            selects[k].onfocus = function () {
                this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
            }
            selects[k].onblur = function () {
                this.parentNode.getElementsByTagName("span")[0].style.display = "none";
            }
        }
    }
}

addLoadEvent(prepareInputsForHints);

//--><!]]>


</script>
</head>
<body>

<form action="" name="form" id="form"  method="post" onsubmit="return(check_form(this))">
<dl>
    <dt>
        <label for="n">First Name:</label>
    </dt>
    <dd>
        <input type="text" name="nome" id="n" value="" onfocus="sel('n')" onblur="des('n',this)" title="Inserisci il nome" />
        <span class="hint">This is the name your mama called you when you were little.<span class="hint-pointer"></span></span>
    </dd>
    <dt>
        <label for="c">Last Name:</label>
    </dt>
    <dd>
        <input type="text" name="cogn" id="c" value="" onfocus="sel('c')" onblur="des('c',this)" title="Inserisci il cognome"  />
        <span class="hint">This is the name your sergeant called you when you went through bootcamp.<span class="hint-pointer"></span></span>
    </dd>
    <dt>
        <label for="e">Email:</label>
    </dt>
    <dd>
            <input type="text" name="emai" id="e" value="" onfocus="sel('e')" onblur="des('e',this)" title="Inserisci la mail"  /></p>    
            <span class="hint">The thing with the @ symbol and the dot com at the end.<span class="hint-pointer"></span></span>
    </dd>

    <dd>
            <input type="submit" name="Invia" id="Invia" value="Registra" />
    </dd>

</dl>
        

</form>
</body>
</html> 
e questo il CSS per visualizzare meglio l'esempio
Codice PHP:
body {
margin:0;
padding:0;
font-family: 'trebuchet ms', trebuchet, arial, verdana, helvetica, sans-serif;
font-size: 90%;
text-align: center;
}

h1 {
margin:0;
padding: 20px;
font-size: 1.8em;
color: #f90;
}

h2{
margin:0;
padding: 0 0 10px 0 ;
font-size: 1.4em;
color: #f90;
}


form {
width:700px; 
border:0px
padding:5px;
margin:0 auto;
}


input {
font-weight: bold; 
width:300px; 
height:21px;
font-family: 'trebuchet ms', trebuchet, arial, verdana, helvetica, sans-serif;
letter-spacing: .1em;
border:#73848C 2px solid; 
padding:0;
}

textarea{
font-weight:bold;
font-size:13px;
font-family: 'trebuchet ms', trebuchet, arial, verdana, helvetica, sans-serif;
letter-spacing: .1em;
width:300px; 
border:#73848C 2px solid; 
padding:0px 0px 0px 2px;
}

/* All form elements are within the definition list for this example */
dl {
    font:normal 12px/15px Arial;
    position: relative;
    width: 350px;
}
dt {
    clear: both;
    float:left;
    width: 130px;
    padding: 4px 0 2px 0;
    text-align: left;
}
dd {
    float: left;
    width: 200px;
    margin: 0 0 8px 0;
    padding-left: 6px;
}


/* The hint to Hide and Show */
.hint {
       display: none;
    position: absolute;
    right: -250px;
    width: 200px;
    margin-top: -4px;
    border: 1px solid #c93;
    padding: 10px 12px;
    /* to fix IE6, I can't just declare a background-color,
    I must do a bg image, too!  So I'm duplicating the pointer.gif
    image, and positioning it so that it doesn't show up
    within the box */
    background: #ffc url(pointer.gif) no-repeat -10px 5px;
}

/* The pointer image is hadded by using another span */
.hint .hint-pointer {
    position: absolute;
    left: -10px;
    top: 5px;
    width: 10px;
    height: 19px;
    background: url(pointer.gif) left top no-repeat;
}