How can I prevent the submit of form of jqBootstrapValidation

Question

I'm not sure if my title makes justice to what my problem is but I'm having a particular problem. I'm using jqBootstrapValidation

WHAT I EXPECT:

If the form has any errors it display the fields with errors in red and prevent the form from beeing submited. If it doens't have any errors it shows a modal to confirm the information

PROBLEM:

Whenever I try to submit the form without errors it just ends up submiting the form.

JS

$("#confirmJob").click(function (evt) {

            // The submit will be canceled by jqBootstrapValidation if the form has any error
            $("#jobForm").submit(); // I have to explicitly call submit here in order to activate the plugin otherwise it doesn't validate the form

            if($("input,select,textarea").jqBootstrapValidation("hasErrors")){
                $("#confirmJob_helper").html("invalid inputs").show().delay(4000).fadeOut();
                return false;
            }

            evt.preventDefault();


            fillModalFields();

            $("#confirmJobModal").modal('show');
        });

HTML

<form action="..." method="POST" id="jobForm" class="novalidate">

    // inputs

    <button type="submit" id="confirmJob">submit</button>

</form>

WHAT I HAVE TRIED

$("#confirmJob").click(function (evt) {
    evt.preventDefault(); // It won't validate the fields

   // $("#jobForm").submit();

   // ...
});

You want to hook into the form submitting `$("form").submit(function(e){ e.preventDefault(); });` not the button being pressed `click()` — Liam, Jul 25 '18 at 12:42
You may also try changing your submit button to a normal Button. Some browsers don't like to be told NOT to submit a form when you click on a Submit button. — Captain Kenpachi, Jul 25 '18 at 12:44
@CaptainKenpachi I have used your suggestion to re-structure the problem and now it seems to be working. To anyone wondering to this question after I did not solve the initial problems, just re-structured the problem to solve in another approach. — null, Jul 25 '18 at 13:10

How can I prevent the submit of form of jqBootstrapValidation

0 Answers0