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＆＃39; .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');
    }
});

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

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向导中的每个步骤

2 个答案: