I am trying to check certain fields in this form and if they aren't correctly filled that it cannot submit. My problem is that when I submit with some fields not filled in it does give the error but it still goes to mail and if I then fill my form in correctly the error doesn't disappear and it doesn't focus like I ask.
<script>
$(document).ready(function(){
$("#submit").click(function(){
var naam = $("#naam").val();
var voornaam = $("#voornaam").val();
var bericht = $("#bericht").val();
if (naam == "" || voornaam == "" || bericht == ""){
$(".error").show();
if(naam == ""){
$("#naam").focus();
}
else if (voornaam == ""){
$("#voornaam").focus();
}
else{
$("#bericht").focus();
}
}
else{
$(".error").hide();
$("form").submit();
}
});
});
</script>
<form action="mailto:#" method="post" enctype="text/plain">
.error {
margin-top: 10px;
color: red;
display: none;
}
Problem is that you are not preventing the actual submit of the form.
You can use event.preventDefault();
In the example below, you can see if I have added event.preventDefault(); inside the if statement where it fails. This will do so the form can't be submitted if the "validation" fails.
Demo
$(document).ready(function() {
$("#submit").click(function(event) {
var naam = $("#naam").val();
var voornaam = $("#voornaam").val();
var bericht = $("#bericht").val();
if (naam == "" || voornaam == "" || bericht == "") {
event.preventDefault();
$(".error").show();
if (naam == "") {
$("#naam").focus();
} else if (voornaam == "") {
$("#voornaam").focus();
} else {
$("#bericht").focus();
}
} else {
$(".error").hide();
$("form").submit();
}
});
});.error {
margin-top: 10px;
color: red;
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="mailto:nielsvervoort14@gmail.com" method="post" enctype="text/plain">
<input id="naam" />
<input id="voornaam" />
<input id="bericht" />
<button id="submit">submit</button>
<div class="error">error</div>
</form>If there is an error, the if statement needs to prevent the default behaviour. Pass the event object into the function and call its preventDefault.
$("#submit").click(function(e){
$(".error").show();
e.preventDefault();
You might also try approaching the problem differently; using the <input type="text" required="required"> see https://devdocs.io/html/attributes/required
You can use the event preventDefault method. just like that.
$(document).ready(function() {
$('#submit').click(function(e){
e.preventDefault();
// or return false;
});
});