Estoy tratando de verificar ciertos campos en este formulario y si no están correctamente completados, no se puede enviar. Mi problema es que cuando envío con algunos campos sin completar, da el error, pero aún va al correo y si luego completo mi formulario correctamente, el error no desaparece y no se enfoca como lo pido.
<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; }El problema es que no está impidiendo el envío real del formulario.
Puede usar event.preventDefault();
En el siguiente ejemplo, puede ver si he agregado event.preventDefault(); dentro de la instrucción if donde falla. Esto hará que el formulario no se pueda enviar si falla la "validación".
Manifestación
$(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>Si hay un error, la instrucción if debe evitar el comportamiento predeterminado. Pase el objeto de evento a la función y llame a su preventDefault.
$("#submit").click(function(e){ $(".error").show(); e.preventDefault(); También puede tratar de abordar el problema de manera diferente; usando <input type="text" required="required"> consulte https://devdocs.io/html/attributes/required
Puede utilizar el método de evento preventDefault. así.
$(document).ready(function() { $('#submit').click(function(e){ e.preventDefault(); // or return false; }); });