Input field blocked if Submit button pressed to check validation form

Question

I try to code the following :

1. The user enters his name and first name in a form.
2. When he click on the Submit button, the form validates the values
3. A modal is opened after the submit button is clicked

But I meet this issue :

If the user leaves a field Empty, and then click on the Submit button, he can't type anything in the fields. The form is blocked, he can't do anything.

Here is the Javascript piece of code :

validateForm = () => {
  window.addEventListener('load', () => {
    let validation = Array.prototype.filter.call(this.needsvalidation, form => {
      this.send.addEventListener('click', event => {
        if(form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
}

You can see the page here : http://p4547.phpnet.org/velos/form.html

Please note : I used the "click" event instead of the Submit event, because I don't send any data to anywhere. I only launch a modal bootstrap when I click on the Book button.

Do you have any ideas ?

Thanks

Answer 1

I resolved my issue :

In my Javascript code, I had this line : this.modal.style.display = "block";

the block display was preventing the possibility to fill the fields when the Submit button was already clicked.