[Javascript] funzioni non funzionanti in un form

bear666

Nuovo Utente
25 Mar 2017
8
0
1
48
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, puoi postare il codice ? non ho capito come hai fatto
 

bear666

Nuovo Utente
25 Mar 2017
8
0
1
48
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
 
Ultima modifica di un moderatore:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
il campo nome e cognome hanno lo stesso id, non puoi assegnare lo stesso id a più di un elemento.
 

bear666

Nuovo Utente
25 Mar 2017
8
0
1
48
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Nuovo Utente
25 Mar 2017
8
0
1
48
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Nuovo Utente
25 Mar 2017
8
0
1
48
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
 
Discussioni simili
Autore Titolo Forum Risposte Data
M La bozza di un sito con alcune funzioni javascript non si apre correttamente su smartphone Javascript 1
localhost.nicola [Javascript] JS non esegue funzioni su bottoni stampati da chiamata AJAX Javascript 1
A la riga clonata non risponde alle funzioni javascript come la riga madre. Javascript 5
M [Javascript] Spiegazioni di due funzioni Javascript 10
epicbrozo [Javascript] Mi potreste spiegare passo passo i passaggi di due funzioni? Javascript 0
V [Javascript] Funzioni su input dinamici Javascript 24
T [Javascript] un form con select dinamica che funzioni da menù... Javascript 2
Andrea Perrone [Javascript] QUESITO SU FUNZIONI Javascript 28
M lanciare due funzioni javascript dopo l'invio di un form Javascript 2
S Collegare 2 funzioni javascript Javascript 2
D Cambio funzioni mouse in calendario Javascript Javascript 1
L Semplice esercizio funzioni JavaScript Javascript 5
G Lanciare funzioni javascript da php PHP 4
L scrivere e richiamare funzioni javascript su file php PHP 2
R funzioni in javascript Javascript 1
A Funzioni javascript Javascript 4
I Javascript : un click due funzioni Javascript 3
V Ripristino funzioni javascript Javascript 1
M Upload immagine con javascript problemi con FormData() Javascript 1
L countdown multiplo javascript Javascript 1
S Problemi Javascript + Aruba Javascript 2
M Inviare un file su un server remoto con JavaScript Javascript 0
T a href="javascript:;" Javascript 1
F Creare elementi html con javascript Javascript 4
A pulsante di update campo mysql con javascript Javascript 2
8 Javascript - PDF Form Javascript 0
B javascript per problemi con pdf e Safari Javascript 0
N informazione javascript Programmazione 0
I Eecuzione di javascript in ciclo foreach php. PHP 7
P javascript:document.forms Javascript 7
S Consiglio esercizio Javascript Javascript 2
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
P Passaggio id php a javascript PHP 6
E lettura da un Database con Javascript jQuery 2
V TRIS in javascript Javascript 1
IClaude Funzione Javascript Javascript 8
Alex_70 Javascript date color Javascript 3
F Convertire JavaScript per la compatibilità nei browser obsoleti Javascript 0
I Passare dei parametri in javascript PHP 0
Shyson Meglio Javascript o HTML? Javascript 4
M Chiamare pagina php da javascript Javascript 8
M Errore JavaScript per php [objeto HTMLParagraphElement] PHP 0
D Javascript per il download dei dati Javascript 0
grgfede Problema javascript con aruba Javascript 1
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
W Modificare il Type di un Input box in javascript ovunque si trovi Javascript 0
I javascript come caricare una pagina sopra quella corrente in automatico Javascript 2
L [Javascript] Problema salvataggio dati in db Javascript 1
max1974 [Javascript] Grafico chartjs con dati da J.ajax Javascript 3
G Quiz Javascript Javascript 4

Discussioni simili