jQuery Smart Wizard v4 Step Validaton using jquery validation plugin

Here, I am using jQuery Smart Wizard v4 to my form, There are three steps and each step have some input fields. My question is, just I need to validate each field before going to the next step.

HTML from my Form is Something similar to this:

<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>

This is how I tried it in 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;
})

But this js code not works for me. That mean I can't go to next step, But its going to next step if I remove validation code from leaveStep method. Can somebody help me to figure this out?

ignore:  "",

Why did you set ignore to "nothing"? This means the plugin will ignore nothing and validate everything.

So when you call .valid() it's validating every single input on your form, even the empty ones in other steps you cannot see... that's why you are stuck.

Remove the ignore option entirely to restore the default behavior of ignoring hidden inputs and only validating what is being shown.