Topic: Modal after validation form

JLA free asked 4 years ago


I would like to show a modal message after a validation form. I'm using the following code but modal doesn't pop-up before php file is called.

Can you help me on this.



(function() {
    'use strict';
    window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
        var validation =, function(form) {
            form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) {
                    return false;
                } else {
            }, false);
    }, false);


enter code here

JLA free answered 4 years ago


many thanks for the answer. When I add this code, indeed the model shows up but form submission is cancelled. How can I do to also have the form submitted ?

Many thanks in advance.


Mateusz Łubianka staff commented 4 years ago

When form is submitted, the page is reloading, so the modal will close after submit.


JLA free commented 4 years ago

Hi, Sorry to borrow you but it doesn't work. To be sure I have explained it correctly, what I want to have is :

  • when I click on the submit button, we have the modal showing up
  • then, when I close the modal, the form is automatically submitted

If I use you tip : else {event.preventDefault();...}, indeed the modal shows up but the form is not submitted.

Can you please help me to solve this case ?

I have seen a lot of similar subject about this on the web but it looks like we have to use AJAX to solve it but I'm not familiar with.

Many thanks in advance for your support.

Kindest regards,


Grzegorz Bujański staff commented 4 years ago

Now you can just add submit even to the close button on the modal and submit your form. Best, Grzegorz

Mateusz Łubianka staff answered 4 years ago

Hi @JLA,

Modal will not appear because it haven't got enough time. If you add event.preventDefault(); in you're code, it will appear:

else {


Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.12.0
  • Device: Mac
  • Browser: Safari
  • OS: OSX
  • Provided sample code: Yes
  • Provided link: No