0

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

4

1 回答 1

1 
ignore:  "",

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

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

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

于 2021-07-30T05:47:05.153 回答