如何使用 jquery-validate 验证 Fuelux 向导中的每个步骤答案

【问题标题】：How to validate each step in fuelux wizard using jquery-validate如何使用 jquery-validate 验证 Fuelux 向导中的每个步骤
【发布时间】：2016-07-17 16:35:52
【问题描述】：

如何验证 Fuelux 向导的每个步骤（单击下一步按钮时）？

函数的jquery代码是这样的。

$('#myWizard').on('actionclicked.fu.wizard', function (evt, data) {
    // validation code for the step here.
    // jquery validator, AFAIK validates  only the whole form.
    // in this case, only the ancestor div

    // had tried this
    var curstep = $('#myWizard').wizard('selectedItem');
    var curstepcontainer = $(this).closest(".step-pane");

    curstepcontainer.validate();

   // and this
   if (curstep.step === 1)
   {
       $('#field1').validate();
       $('#field2').validate();
   }
});

两者都没有工作。

虽然这种方法可能是使其发挥作用的一种方法，但还有其他理想的方法吗？

我从https://collegeparktutors.com/get-tutor?course_dropdown=19 了解到这是可以做到的。

还检查了 formvalidation.io (http://formvalidation.io/examples/fuel-ux-wizard/)，他们有一个很好的工作代码，这解决了我们的问题。然而，这是一个商业产品，我们正在探索开源/免费工具:-)

任何指针，帮助，建议表示赞赏！谢谢！

【问题讨论】：

标签： jquery jquery-validate wizard fuelux

【解决方案1】：

您可以使用 jQueryvalidation 的.valid() method 来验证表单控件的集。例如：

<div class="step-pane sample-pane" id="step-contact" data-step="3">
    <div class="h2 step-greeting">
        How we can contact you?<br>
        <small>We need to know so we can put you in touch with a tutor.</small>
    </div>
    <div class="container step-container-narrow">
        <label>Name</label>
        <div class="row">
            <div class="col-sm-6">
              <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-pencil"></i></span>
                    <input type="text" class="form-control" name="first_name" placeholder="First">
                </div>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-pencil"></i></span>
                  <input type="text" class="form-control" name="last_name" placeholder="Last">
                </div>
              </div>
            </div>
        </div>
        <div class="form-group">
          <label>Email</label>
          <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
            <input type="text" class="form-control" name="email" placeholder="Please provide your email address.">
          </div>
        </div>
        <div class="form-group">
          <label>Confirm email</label>
          <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
            <input type="text" class="form-control" name="email_confirm" placeholder="Please re-enter your email address.">
          </div>
        </div>      
        <div class="form-group">
          <label>Phone (optional)</label>
          <div class="input-group optional">
            <span class="input-group-addon"><i class="fa fa-phone"></i></span>
            <input type="text" class="form-control" name="phone" placeholder="Please provide a phone number if possible.">
          </div>
        </div>
        <div class="form-group">
          <label>Availability</label>
          <textarea class="form-control" name="availability" rows="5" placeholder="Please list days and times that you are available."></textarea>
        </div>
        <p>
            <strong>We promise not to spam you or share your information with third parties.</strong>
        </p>  
    </div>
    <div class="text-center">
        <button type="button" class="btn btn-success btn-lg btn-input-contact-info">Next <i class="fa fa-angle-right"></i></button>
    </div>
</div>

然后您将.btn-input-contact-info 按钮绑定到.click() 处理程序：

// Bind next button for contact info.  Validate data, then proceed to next page only if valid
$('.btn-input-contact-info').on('click', function(){

    var form = $("form[name='new_request']");
    var fields = form.find("#step-contact").find(":input");
    if (fields.valid()) {        
        $("#request-wizard").wizard('next');
    }
});

请注意，我们首先将表单划分为 divs 和不同的 ids - 您可以将每个向导步骤的控件放入单独的 div。要验证特定 div 的控件，您可以使用 form.find 获取所有输入元素，然后在该集合上调用 valid()。

【讨论】：

【解决方案2】：

利用JQuery的通配符选择，将按钮的id命名为'next-1'，'next-2'等，步骤的id有'step-1'，'step-2'等，它允许有一个小块来处理所有步骤。

$('[id^=next]').on('click', function () {       
    var curstep = $('#myWizard').wizard('selectedItem');
    var form = $("form[name='register']");
    var fields = form.find('#step-' + curstep.step).find(":input");
    if (fields.valid()) {
        $('#myWizard').wizard('next');
    }
 });

以防万一，有人觉得它有帮助:-)

【讨论】：