I use this script to send the form data after validating it.
The problem is that when I press the send button it tells me that you have to complete the field (required) but still sends me the data to the server.
How can I change the code to send me the data only after the validation has been completed?
<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<script>
function sendMsg(){
$("#contatti").serialize()).done(function(data){
if(data){
alert("Messaggio inviato correttamente");
}else{
alert("Errore durante l'invio");
}
});
}
</script>
<!--/*{nome:$("#nome").val(), email:$("#email").val(), messaggio:$("#messaggio").val()*/-->
</head>
<body>
<div data-role="page" id="info-page">
<div data-role="header" data-theme="b">
<h1> Information</h1>
</div>
<div data-role="content">
<form id="contatti" >
<div data-role="fieldcontain">
<label for="nome">Nome:</label>
<input name="nome" type="text" required="required" placeholder="Inserisci il tuo nome">
</div>
<div data-role="fieldcontain">
<label for="email">Email:</label>
<input name="email" type="email" required="required" placeholder="Inserisci la tua email">
</div>
<div data-role="fieldcontain">
<label for="messaggio">Messaggio:</label>
<textarea name="messaggio" rows="30" required="required" placeholder="Inserisci il messaggio"></textarea>
</div>
<input type="reset" value="reset" data-inline="true">
<input type="submit" value="invia" data-inline="true" onClick="sendMsg()">
</form>
</div>
<div data-role="footer" data-position="fixed">2018</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>