[Javascript] comando innerHTML non funziona

#Fede5

Nuovo Utente
23 Ott 2019
10
0
1
Ciao ragazzi, ho scritto il seguente codice html per creare un form di contatto ma non capisco perché nello script validate( ) innerHTML non funziona mentre se lo sostituisco con alert i controlli funzionano perfettamente. Qualcuno mi può aiutare? Grazie


HTML:
<!DOCTYPE html>
<html>
<head>   
<title>Form</title>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">
    
<link rel="stylesheet" href="css/style.css">


    
<!--Font Awesome-->   
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://kit.fontawesome.com/a076d05399.js"></script>
    
<!--Font Awesome--> 
    
<!--JQuery-->     
    
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<!--JQuery-->     
    
<!--Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!--Bootstrap -->   
 
</head>
    
    
<body>


<div class="form">
    <h2>Richiedi maggiori informazioni</h2>
    
    <div id="errorMessage"></div> 
        
    <form  name="modulo" method="post" onsubmit="return validate()">
      
  
  
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome" placeholder="Nome *">
        
 
    <label for="cognome">Cognome:</label>
    <input type="text" id="cognome" name="cognome" placeholder="Cognome *">   
    
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="Email *">
    
        
  
    <label for="numero">Telefono:</label>
    <input type="text" id="telefono" name="email" placeholder="Telefono">   
        
    
    <label for="oggetto">Oggetto:</label>
    <input type="text" id="oggetto" name="oggetto" placeholder="Oggetto *">
          
    
    <label for="messaggio">Messaggio:</label>   
        <textarea id="messaggio" name="messaggio" placeholder="Messaggio *"></textarea>
    <input type="submit" value="Invia" >     
    </form>
        
    </div>
    </div>

<script type="text/javascript">
    
function validate(){
var nome = document.modulo.nome.value;
var cognome = document.modulo.cognome.value;
var email = document.modulo.email.value;
var telefono = document.modulo.telefono.value;
var oggetto = document.modulo.oggetto.value;
var messaggio = document.modulo.messaggio.value;
var car_alf = /^([a-zA-Z\xE0\xE8\xE9\xF9\xF2\xEC\x27]\s?)+$/; 
var mailformat = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-]{2,})+.)+([a-zA-Z0-9]{2,})+$/; 
    
    
    
var errorBox = document.getElementById("errorMessage");
    
var alertDiv = '<div class="alert alert-danger alert-dismissible" role="alert">';
    

    
if(nome=="" || nome == "undefined" || cognome=="" || cognome == "undefined" || email=="" || oggetto == "" || oggetto == "undefined" || messaggio == "" || messaggio == "undefined"){
    errorBox.innerHTML = alertDiv + '<strong>Attenzione!</strong> Tutti i campi devono essere compilati' + "</div>";
    document.modulo.nome.focus();
   
    return false;   
}
 
//verifica correttezza nome
if(!car_alf.test(nome)){
     confirm("Il nome inserito non è valido");
     document.modulo.nome.focus();
     event.preventDefault();
     return false;
 }
  
//verifica correttezza cognome   
 if(!car_alf.test(cognome)){
     confirm("Il cognome inserito non è valido");
     document.modulo.cognome.focus();
     event.preventDefault();
     return false;
 }
    
//verifica correttezza email
 if(!mailformat.test(email)){
    confirm("L'email inserita non è valida");
    document.modulo.email.focus();
     event.preventDefault();
     return false;
 }   
    
//verifica correttezza telefono
if(isNaN(telefono)){
  confirm("Il telefono inserito non è valido");
    document.modulo.email.focus();
     event.preventDefault();
     return false;   
}   
    

    
    
   else{
  confirm("Grazie,invio la conferma");
  document.invio.submit();
  document.invio.action ="homepahe.php#form";
 
   }
}
    
    
    
    </script>     
    
    
    <!--Script validazione form -->
      
        
    

</body>
</html>
 

mr.x

Utente Attivo
9 Apr 2016
221
22
28
HTML:
    <label for="numero">Telefono:</label>
    <input type="text" id="telefono" name="email" placeholder="Telefono">
correggi il name
 

mr.x

Utente Attivo
9 Apr 2016
221
22
28
Senzanome.jpg


questo il risultato ottenuto con la sola correzione che ti ho segnalato.. cos'è che nn ti funziona?
 

#Fede5

Nuovo Utente
23 Ott 2019
10
0
1
Vedi l'allegato 6748

questo il risultato ottenuto con la sola correzione che ti ho segnalato.. cos'è che nn ti funziona?
la parte di codice che non funziona è questa

HTML:
if(nome=="" || nome == "undefined" || cognome=="" || cognome == "undefined" || email=="" || oggetto == "" || oggetto == "undefined" || messaggio == "" || messaggio == "undefined"){
    errorBox.innerHTML = alertDiv + '<strong>Attenzione!</strong> Tutti i campi devono essere compilati' + "</div>";
    document.modulo.nome.focus();
  
    return false;   
}
 

mr.x

Utente Attivo
9 Apr 2016
221
22
28
come sopra, solo correggendo il name..
Risltato si riceve un avviso di compilare tutti i campi se en manca almeno 1 di quelli obbligatori.
Poi non capisco se volessi ottenere un altro risultato, da quanto hai scritto questo è ciò che ho capito.

Senzanome2.jpg


volendo poi scrivere un codice leggermente più pulito

HTML:
     <div id="error" class="alert alert-danger alert-dismissible" role="alert"></div> <!-- nuova riga segnaposto -->
 <!--   <div id="errorMessage"></div>  -->
       
    <form  name="modulo" method="post" onsubmit="return validate()">
.....

HTML:
if(nome=="" || nome == "undefined" || cognome=="" || cognome == "undefined" || email=="" || oggetto == "" || oggetto == "undefined" || messaggio == "" || messaggio == "undefined"){
// errorBox.innerHTML = alertDiv + '<strong>Attenzione!</strong> Tutti i campi devono essere compilati' + "</div>";
document.getElementById('error').innerHTML = '<strong>Attenzione!</strong> Tutti i campi devono essere compilati';// <- nuova riga