How can I trigger only the validation of a Submit Button?

Hi,

we want both the function of a submit button to validate required fields as well as opening a lightbox on click(which doesn’t work on the normal submit, there is only ‘open URL in lightbox’), instead of actually submitting the form.

So we added a custom button that will be invisible for the user, that we trigger on click of the submit button which will open a lightbox. And since we don’t want the actual submit to happen, we tried preventDefault() in the same click event, but this also prevents the validation.

We cannot use preventDefault() in a condition, because then the Default will already happen before we even reach the condition.
So we thought to prevent the default right at the beginning of the click event and then later trigger the validation under a condition.
We found the hook ‘beforeFormSubmit’, but it didn’t work for us, maybe because our submit button is in a Custom HTML element!?

We added the following to the onclick event, with a simple console log that gets triggered but the one from the formSubmit doesn’t:
(Note: we removed the ‘preventDefault()’ to test this one in case the hook needs the actual submit to happen.)

      } else {
        console.log('else'); //this shows up in the console when we submit
        window.ub.hooks.beforeFormSubmit.push(function(args) { 
          console.log('works');   //this doesn't
        });
      }

Our last resort would be to write the validations ourselves, but we would like to avoid it, since the existing ones would work fine for us…

Any suggestions on how we could trigger (only) the validation? Or on only suppressing/preventing the submit?

Thanks!
tolingo dev Team