'Jquery checking form

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;
}
javascripthtmljquerycssforms


Solution 1:[1]

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

Solution 2:[2]

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 class="error">error</div>
</form>

Solution 3:[3]

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

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

Solution 4:[4]

You need to call e.preventDefault() only when there is an error that should prevent the form from submitting.

Also, the better way to check for empty fields is to check for the presence of only whitespace, not just comparing against an empty string:

$(document).ready(function(){
    $("#submit").click(function(e){
       const re = /^\s*$/
       var naam = $("#naam").val();
       var voornaam = $("#voornaam").val();
       var bericht = $("#bericht").val();
       if (re.test(naam) || re.test(voornaam) || re.test(bericht)){
           e.preventDefault(); // Stop form from submitting
           $(".error").show();
           if(re.test(naam)){
               $("#naam").focus();
           }
           else if (re.test(voornaam)){
               $("#voornaam").focus();
           }
           else{
               $("#bericht").focus();
           }
       }
       else{
          $(".error").hide();
          $("form").submit();

       }
    });
});

This will indicate an error when the user not just leaves a field blank, but also fills in only spaces.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Josh Surber
Solution 2
Solution 3 Shravan Goswami
Solution 4 kmoser

Related Questions