jquery - 如何使用 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 按钮绑定(bind)到 .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()。