Trigger form validation

Hi, does anyone know how to trigger a form to validate without submitting? My use case is: I have a multi-step form where I have “Next” buttons. Before the user can go to the next page, I want the error validations to show up, for example if there are inputs that are not filled in.

I can’t figure out how to do this without form submit. Things I’ve tried:

1. triggering the individual form input validations using the “click” dynamic event on the “Next” button, however that didn’t stop it from moving to the next page, and I also don’t like the idea of having to trigger each input individually
2. coding some custom javascript to iterate through the form and validate each field, but that didn’t work either - not sure if I have a syntax issue. The script I used is as follows:
   ‘function validateVisibleInputs() {
   var arr = document.getElementsByTagName(“form”);
   for (var i = 0; i < arr.length; i++) {
   arr[i].reportValidity();
   }
   }’

Note that this half-works: it triggers a different validation format (I’m assuming this is the default HTML5 validation rather than the normal validation I want that comes up on form submit) and it also doesn’t stop the “Next” button from moving the user to the next page.

I saw this forum post but it didn’t solve my problem: Validating multi-step form

I would love to know if there is a way to programmatically validate the visible fields in the form, before the “Next” button moves the user to the next page. Is there a way to trigger form validation using javascript? I’m just not sure how to link it to the dmx validator…