jQuery Smart Wizard v4 Step Validation 使用 jquery 验证插件

Posted 2023-05-07

【中文标题】jQuery Smart Wizard v4 Step Validation 使用 jquery 验证插件

【英文标题】：jQuery Smart Wizard v4 Step Validaton using jquery validation plugin

【发布时间】：2021-10-04 06:05:38

【问题描述】：

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

【参考方案1】：

ignore:  "",

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

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

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

【讨论】：

谢谢你的回答...让我检查一下