jquery - jquery 検証プラグインを使用した jQuery Smart Wizard v4 ステップ検証

Question

ここでは、jQuery Smart Wizard v4 をフォームに使用しています。3 つのステップがあり、各ステップにはいくつかの入力フィールドがあります。私の質問は、次のステップに進む前に各フィールドを検証する必要があるということです。

私のフォームからのHTMLは、これに似たものです:

<form class="regform" action="" method="post" id="addNew_user">
  <div id="Regwizard">
    <ul>
      <li class="wizard-progressbar"></li>
      <li><a href="#step-1">Information</a></li>
      <li><a href="#step-2">Login</a></li>
      <li><a href="#step-3">Permissions</a></li>
    </ul>

    <div class="px-2 py-2">
      <div id="step-1">
        <h4>Enter the following user information</h4> 
        
        <div id="form-step-0">
          <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" name="name" class="form-control" required />
          </div>
          <div class="form-group">
            <label for="name">Email:</label>
            <input type="email" name="email" class="form-control" required />
          </div>
        </div>
      </div>

      <div id="step-2">
        <h4>Enter the following login information</h4> 
      
        <div id="form-step-1">
          <div class="form-group">
            <label for="username">Username:</label>
            <input type="text" name="username" class="form-control" required />
          </div>
          <div class="form-group">
            <label for="name">Password:</label>
            <input type="password" name="password" class="form-control" required />
          </div>
        </div>
      </div>

      <div id="step-3" class="pt-0">
        <h4>Check the boxes below to access modules.</h4> 

        <div id="form-step-1">
          <div class="form-group">
            <input type="checkbox" name="module" value="1" /> Module Name
            <input type="checkbox" name="module" value="2" /> Module Name
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

これは私がjQueryで試した方法です：

$('#userRegwizard').smartWizard({
  theme: 'circles',
  useURLhash: false,
  showStepURLhash: false,
  autoAdjustHeight: true,
  transitionSpeed: 150,
  toolbarSettings: {
    toolbarPosition: 'bottom', 
    toolbarButtonPosition: 'right',
    showNextButton: false,
    showPreviousButton: false, 
    toolbarExtraButtons: [
      $('<div class="loader mr-3 d-none"><i class="fa fa-spinner fa-spin text-blue fa-2x"></i></div>'),
      $('<button class="btn btn-outline-secondary sw-btn-prev radius-l-1 mr-2px"><i class="fa fa-arrow-left mr-15"></i> Previous</button>'),
      $('<button class="btn btn-outline-primary sw-btn-next sw-btn-hide radius-r-1">Next <i class="fa fa-arrow-right mr-15"></i></button>'),
      $('<button class="btn btn-green sw-btn-finish radius-r-1 regThisUser"><i class="fa fa-check mr-15"></i> Submit</button>')
    ]
  }
}) 

.on("showStep", function(e, anchorObject, stepNumber, stepDirection) {

})

$('#addNew_user').validate({
  errorElement: 'span',
  errorClass: 'form-text form-error text-danger-m2',
  focusInvalid: false,
  ignore:  "",
  rules: {
    email: {
      email: true
    },          
    username: {
      required: true,
    },
    password: {
      required: true,
      minlength: 5
    },
    password_conform: {
      required: true,
      minlength: 5,
      equalTo: "#password"
    }
  }
}) 

$('#userRegwizard').on("leaveStep", function(e, anchorObject, stepNumber, stepDirection) {
  var elmForm = $("#form-step-" + stepNumber);
  if (stepDirection == 'forward' && elmForm) {
    if ($('#addNew_user').valid()) {
        return true
    } else {
        return false
    }
  }
  //return true;
})

しかし、このjsコードは私には機能しません。つまり、次のステップに進むことはできませんが、leaveStepメソッドから検証コードを削除すると、次のステップに進みます。誰かがこれを理解するのを手伝ってくれますか?