Jquery checking form-CodePudding

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:[email protected]" method="post" enctype="text/plain">
.error {
    margin-top: 10px;
    color: red;
    display: none;
}

CodePudding user response：

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

CodePudding user response：

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:[email protected]" method="post" enctype="text/plain">
  <input id="naam" />
  <input id="voornaam" />
  <input id="bericht" />
  <button  id="submit">submit</button>
  <div >error</div>
</form>

CodePudding user response：

You can use the event preventDefault method. just like that.

$(document).ready(function() {
   $('#submit').click(function(e){
       e.preventDefault();
    // or return false;
 });
});