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>
