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

Question

如何验证 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/)，他们有一个很好的工作代码，解决了我们的问题。然而，这是一个商业产品，我们正在探索开源/免费工具:-)

感谢任何指点、帮助和建议！谢谢！

Answer 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');
    }
});

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

Answer 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');
    }
 });

以防万一，有人觉得有用 :-)

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

How to validate each step in fuelux wizard using jquery-validate

jquery

wizard

jquery-validate

fuelux