[Javascript] funzioni non funzionanti in un form

bear666 · 25 Mar 2017

ciao a tutti.mi trovo con questo problema: devo fare un form con dei controlli in javascript.Il problema è questo: per comodità ho realizzato tutti i controlli separatamente ( ho quindi tanti files html tutti uguali ad eccezione del codice javascript); tutti i controlli funzionano perfettamente.il problema si verifica quando li metto tutti insieme: in questo caso funziona solo il primo controllo che ho inserito nel codice.
I vari controlli sono tutti attivati con onblur.le varie funzioni sono controlli sul nome,sul cellulare,sulla mail e sulla password: in caso positivo vanno a colorare di verde il campo di appartenenza e scrivono un messaggio con innerHTML e terminano con return true.Avete idea di come possa risolvere questo problema?
un grazie anticipato

criric · 27 Mar 2017

Ciao, puoi postare il codice ? non ho capito come hai fatto

bear666 · 28 Mar 2017

HTML:

<html>
<head>
<meta charset=utf-8 content="width=device-width, initial-scale=1.0"/>
<title>form12</title>

<link rel=stylesheet href=iscrizione2.css type=text/css>

<script>
        function verificaNome(){
            
             var n=document.getElementById("nome").value;
             var num= /^([0-9])+$/ ;
            
             if ((n=="") || (n=="undefinited")){
                 document.getElementById("nome").style.background="red";
                 document.getElementById("errore").innerHTML="il nome non può essere nullo";
                 document.getElementById("errore").style.color="red";
                 return false;
             }
             var ris=num.test(n);
             for (var i=0;i<n.length;i++){
                 ris=num.test(n.charAt(i))
                if (ris){
                         document.getElementById("nome").style.background="red";
                         document.getElementById("nome").style.color="white";
                         document.getElementById("errore").innerHTML="il nome non può contenere numeri";
                         document.getElementById("errore").style.color="red";
                         return false;
               }
            }
             if (n.length<3){
                 document.getElementById("errore").innerHTML="red";
                 document.getElementById("nome").style.background="red";
                 document.getElementById("errore").innerHTML="il nome deve essere di almeno 3 caratteri";
                 document.getElementById("errore").color="white";
                 return false;
             }else
                  {    
                   document.getElementById("nome").style.background="green";
                   document.getElementById("nome").style.color="white";
                   return true;
            }
          
          

}  
  
          
          
</script>                
                
</head>
<body>
   <form id=anagrafica>
     <fieldset>
      <legend> CHI SEI? </legend>
        <p>I campi (*) sono obbligatori</p>
     <ol>
      <li>
            <label>Nome*</label>
            <input type=text id="nome" maxlength="15" placeholder=" Nome.." onblur="verificaNome()" required/>
            <p id="errore1" /P>
        </li>
        <li>
           <label>Cognome*</label>
            <input type=text id="nome" maxlength="15" placeholder=" Cognome.." onblur="verificaNome()" required/>
         <p id=<"errore1"/p>
        </li>
        <li>
           <label>Sesso</label>
            <input type="radio" name="sex" value="Male">Uomo
            <input type="radio" name="sex" value="Female">Donna</br>
        </li>
        <li>
           <label>Data di nascita</label>
            <input type=date id="data"onchange="generaUsername()" >
        </li>
      </ol>
     </fieldset    >
     <fieldset>
      <legend>Contatti</legend>
       <ol>
         <li>
            <label>Cellulare</label>
            <input type=text id="cellulare" maxlength="10" placeholder=" 3xxxxxxxxx" onblur="verificaNumero()" >
        <p id="errore3" /P>  
        </li>  
            <li>
            <label>E-mail*</label>
            <input type=mail name="email" maxlength="30" placeholder=" [email protected]" onblur="verificaEmail()"  required>
        </li>  
      </ol>
      </fieldset>
     <fieldset>
         <legend>Sicurezza</legend>
         <ol>
         <li>
          <label>Username*</label>
          <input type="text" id="username" placeholder=" Username.." onblur="generaUsername()" required/>
          <p id="errore2" /p>
          </li>
        </ol>
        </fieldset>
        <fieldset>
          <legend>Campi password</legend>
         <ol>
         <li>
           <label>Password*</label>
            <input type="password" id="password" maxlength="10" placeholder="*********" required>
            <em>minimo 6 caratteri</em>
          </li>
           <li>
           <label>Ripeti Password*</label>
            <input type="password" id="password2" maxlength="10" onblur="sicurezzaPassword()"  placeholder="*********" required>
            <p id="errore" /p>
          </li>
          <li>
          <label>Sicurezza Password</label>
          <input type="text" id="sicpasw"value="sicurezza password" disabled="disabled"/>
          </li>
                  </ol>
      </fieldset>  
     <fieldset>
          <legend>Scegli Avatar</legend>
           <ol id=avatar>
          <li>
          <img class="dimensione"src="manga-avatar-1.jpg" alt="immagine" width="60" height="60">
          <div><input type="radio" name="sex" value="male">ted</div>
          </li>
          <li>
          <img src="Natsu-2.jpg" alt="immagine" width="60" height="60">
          <div><input type="radio" name="sex" value="male">mike</div>
          </li>
          <li>
          <img src="mk.jpg" alt="immagine" width="60" height="60">
          <div><input type="radio" name="sex" value="female">sveva</div>
          </li>
          <li>
          <img src="82.jpg" alt="immagine" width="60" height="60">
          <div><input type="radio" name="sex" value="male">john</div>
          </li>
          <li>
          <img src="face_your_manga.jpg" alt="immagine" width="60" height="60">
          <div><input type="radio" name="sex" value="female">robin</div>
          </li>
          <li>
          <img src="Imagineer.png" alt="immagine" width="60" height="60"></br>
          <div><input type="radio" name="sex" value="female">martha</div>
          </li>
          </ol>
     </fieldset>  
            
      <fieldset>
        <button type=submit >ISCRIVITI</button>
    </fieldset>
    </form>
</body>
</html>

la funzione verifica nome funziona nel campo nome ma non in quello cognome

criric · 28 Mar 2017

il campo nome e cognome hanno lo stesso id, non puoi assegnare lo stesso id a più di un elemento.

bear666 · 28 Mar 2017

ho provato a cambiare id al campo cognome ( ho messo id="cognome") ma così non posso usare la funzione nel secondo caso in quanto quando vado a fare document.getElementById ho ("nome")

criric · 28 Mar 2017

passa alla funzione l'id

Codice:

onblur="verificaNome(this.id)"

e lo recuperi cosi

Codice:

function verificaNome(id){
            var n=document.getElementById(id).value;

o con gli apici, non ricordo

Codice:

function verificaNome(id){
            var n=document.getElementById("id").value;

o forse è meglio direttamente il value

Codice:

onblur="verificaNome(this.value)"
function verificaNome(valore){
            var n=valore;

fai qualche prova

bear666 · 28 Mar 2017

ho provato con id sia con che senza apici e anche con this.value ma l'unico risultato che ho ottenuto è che adesso la funzione non funziona affatto

criric · 28 Mar 2017

il tag <p> si chiude con </p>, anche qui vale la stessa regola degli id : devono essere univoci
si scrive "undefined" non "undefinited"
prova questo

HTML:

<script>
    function verificaNome(id) {

        var n = document.getElementById(id).value;
        var num = /^([0-9])+$/;

        if (n == "" || n == "undefined") {
            document.getElementById(id).style.background = "red";
            document.getElementById(id + "_error").innerHTML = "il " + id + " non può essere nullo";
            document.getElementById(id + "_error").style.color = "red";
            return false;
        }
        var ris = num.test(n);
        for (var i = 0; i < n.length; i++) {
            ris = num.test(n.charAt(i))
            if (ris) {
                document.getElementById(id).style.background = "red";
                document.getElementById(id).style.color = "white";
                document.getElementById(id + "_error").innerHTML = "il " + id + " non può contenere numeri";
                document.getElementById(id + "_error").style.color = "red";
                return false;
            }
        }
        if (n.length < 3) {
            document.getElementById(id + "_error").innerHTML = "red";
            document.getElementById(id).style.background = "red";
            document.getElementById(id + "_error").innerHTML = "il " + id + " deve essere di almeno 3 caratteri";
            document.getElementById(id + "_error").color = "white";
            return false;
        } else {
            document.getElementById(id).style.background = "green";
            document.getElementById(id).style.color = "white";
            return true;
        }
    }
</script>
<li>
    <label>Nome*</label>
    <input type="text" id="nome" maxlength="15" placeholder=" Nome.." onblur="verificaNome(this.id)" required/>
    <p id="nome_error"></p>
</li>
<li>
    <label>Cognome*</label>
    <input type="text" id="cognome" maxlength="15" placeholder=" Cognome.." onblur="verificaNome(this.id)" required/>
    <p id="cognome_error"></p>
</li>

ps:
esistono anche cognomi di 2 lettere : Dario Fo

bear666 · 28 Mar 2017

grazie: adesso ci guardo.quanto ai cognomi: il prof ci aveva chiesto una funzione ( che ho fatto e fortunatamente funziona e non ho messo insieme ad altre per motivi di spazio) che generasse automaticamente uno username consigliato composto dalle prime tre lettere del nome,prime 3 del cognome e anno di nascita

Cerca

Cerca

[Javascript] funzioni non funzionanti in un form

bear666

Nuovo Utente

criric

Super Moderatore

bear666

Nuovo Utente

criric

Super Moderatore

bear666

Nuovo Utente

criric

Super Moderatore

bear666

Nuovo Utente

criric

Super Moderatore

bear666

Nuovo Utente

Discussioni simili