jQuery 使用 jquery 验证插件的智能向导 v4 步骤验证

Question

在这里，我在表单中使用 jQuery 智能向导 v4，共有三个步骤，每个步骤都有一些输入字段。我的问题是，我只需要在进入下一步之前验证每个字段。

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 方法中删除验证码，它就会进入下一步。有人可以帮我解决这个问题吗？

Answer 1

ignore:  "",

为什么将 ignore 设置为“无”？这意味着插件将忽略任何内容并验证所有内容。

因此，当您调用 .valid() 时，它会验证您表单上的每一个输入，即使是您看不到的其他步骤中的空输入...这就是您被卡住的原因。

完全删除 ignore 选项以恢复忽略隐藏输入并仅验证显示内容的默认行为。

jQuery 使用 jquery 验证插件的智能向导 v4 步骤验证

jQuery Smart Wizard v4 Step Validaton using jquery validation plugin

jquery

jquery-validate

smart-wizard