How can I get Form Validation to work when using a "shared" button (instead of an input element of type "submit")?

help
1

I’ve got some validation in my HTML like so:

The page has a “shared” button on it:


    {{> Template.dynamic template=getStepTemplate}}

This button is “constant” to all the Templates (which are dynamically swapped out). The button works fine as far as replacing one Template with another with this code:

  Template.postTravelWizard.events({
    'click #nextStep': function(e, t) {
      // e.preventDefault();
      //save something...
    
      var step = Session.get('stepNum');
      step = (step) < 5 ? ++step : 1;
      Session.set('stepNum', step);
    },

However, the form validation does not fire, presumably because this is a button, and not an input of type “submit”.

But if I change it from a button to an input type=“submit”, that is to say from this:

Next

…to this:

…and the event handler to this:

Template.postTravelWizard.events({
    //'click #nextStep': function(e, t) {
    'submit form': function(e) {
       e.preventDefault();
      //save something...
      var step = Session.get('stepNum');
      step = (step) < 5 ? ++step : 1;
      Session.set('stepNum', step);   
      }
    },

…it won’t swap out the Templates. In fact, the breakpoint I set in the “‘submit form’: function(e) {” handler (on the “e.preventDefault();” line) is not even reached…???

It’s a “Catch-22” situation.

Do I have to, in a case such as this, manually validate the form entries?