Untitled

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<link href="custom.css" rel="stylesheet" type="text/css">
<link href="../css/bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body>
<section id="form">
<form class="form-group" action="Invia();">
<div class="container">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 form-group " id="name">
    <label> Nome:</label>
    	<input type="text" class="form-control" placeholder="Inserisci il tuo nome" id="nome">
        <span id="nan1"></span>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 form-group" id="surname">
    <label> Cognome:</label>
    	<input type="text" class="form-control" placeholder="Inserisci il tuo cognome" id="cognome">
        <span id="nan2"></span>
	</div>
    <div class="col-xs-12 form-group" id="email">
    <label> E-mail:</label>
    	<input type="email" class="form-control" placeholder="Inserisci il tuo indirizzo di posta elettronica" id="mail">
        <span id="nan3"></span>
	</div>
    <div class="form-group col-xs-12" id="movie">
    <label> Seleziona il film da votare:</label>
    <select id="film" class="form-control">
    	<option value="0">- - - - -</option>
    	<option value="1">Primo film</option>
        <option value="2">Secondo film</option>
        <option value="3">Terzo film</option>
        <option value="4">Quarto film</option>
        <option value="5">Quinto film</option>
        <option value="6">Sesto film</option>
        <option value="7">Settimo film</option>
        <option value="8">Ottavo film</option>
    </select>
    </div>
    <div class="form-group col-xs-12">
    	<label> Recensione:</label>
        <textarea class="form-control" rows="4" id="commento" placeholder="Inserisci un commento al tuo voto!"></textarea>
    </div>
    <div class="form-group">
    	<input type="reset" class="btn btn-primary col-sm-3 col-sm-offset-2" id="reset" value="Resetta Campi">
	</div>
    <div class="form-group">
    	<button type="button" class="btn btn-success col-sm-3 col-sm-offset-2" id="invia"> Invia </button>
	</div>
    </div>
</form>
</section>
<script>
document.getElementById("invia").onclick =  function Nome(){
	var name= document.getElementById("name");
	var nome= document.getElementById("nome").value;
	var surname= document.getElementById("surname");
	var cognome= document.getElementById("cognome").value;
	var email= document.getElementById("email");
	var mail= document.getElementById("mail").value;
	var movie= document.getElementById("movie");
	var film= document.getElementById("film").value;


	if(isNaN(nome)){$(document).ready(function names(){
    $("#name").removeClass("has-error has-feedback");
	$("#name").addClass("has-success has-feedback");
	$("#nan1").removeClass("glyphicon glyphicon-remove form-control-feedback");
	$("#nan1").addClass("glyphicon glyphicon-ok form-control-feedback");
	document.getElementById("nan1").style="margin-right:2%;";
})} else {	$(document).ready(function namee(){
	$("#name").removeClass("has-success has-feedback");
    $("#name").addClass("has-error has-feedback");
	$("#nan1").removeClass("glyphicon glyphicon-ok form-control-feedback");
	$("#nan1").addClass("glyphicon glyphicon-remove form-control-feedback");
	document.getElementById("nan1").style="margin-right:2%;";

})}

	if(isNaN(cognome)){$(document).ready(function surnames(){
    $("#surname").removeClass("has-error has-feedback");
	$("#surname").addClass("has-success has-feedback");
	$("#nan2").removeClass("glyphicon glyphicon-remove form-control-feedback");
	$("#nan2").addClass("glyphicon glyphicon-ok form-control-feedback");
	document.getElementById("nan2").style="margin-right:2%;";
})} else {	$(document).ready(function surnamee(){
	$("#surname").removeClass("has-success has-feedback");
    $("#surname").addClass("has-error has-feedback");
	$("#nan2").removeClass("glyphicon glyphicon-ok form-control-feedback");
	$("#nan2").addClass("glyphicon glyphicon-remove form-control-feedback");
	document.getElementById("nan2").style="margin-right:2%;";

})}

	if(isNaN(mail)){$(document).ready(function mails(){
    $("#email").removeClass("has-error has-feedback");
	$("#email").addClass("has-success has-feedback");
	$("#nan3").removeClass("glyphicon glyphicon-remove form-control-feedback");
	$("#nan3").addClass("glyphicon glyphicon-ok form-control-feedback");
	document.getElementById("nan3").style="margin-right:1%;";
})} else {	$(document).ready(function maile(){
	$("#email").removeClass("has-success has-feedback");
    $("#email").addClass("has-error has-feedback");
	$("#nan3").removeClass("glyphicon glyphicon-ok form-control-feedback");
	$("#nan3").addClass("glyphicon glyphicon-remove form-control-feedback");
	document.getElementById("nan3").style="margin-right:1%;";

})}

	if(film!="0"){$(document).ready(function movies(){
    $("#movie").removeClass("has-error has-feedback");
	$("#movie").addClass("has-success has-feedback");
})} else {	$(document).ready(function moviee(){
	$("#movie").removeClass("has-success has-feedback");
    $("#movie").addClass("has-error has-feedback");

})}

if(name.classList.contains("has-success") && surname.classList.contains("has-success") && email.classList.contains("has-success") && movie.classList.contains("has-success")){
alert("Dati Inviati Correttamente!");} else {alert("Ci sono degli errori nell'immissione dei dati nel form");}
}

</script>
<script src="../js/jquery-3.2.0.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>