Как проверить каждый шаг в мастере Fuelux с помощью jquery-validate

Question

Как я могу проверить каждый шаг мастера подачи топлива (при нажатии следующей кнопки)?

Код 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

Вы можете использовать .valid() method jQueryvalidation для проверки набора элементов управления формой. Например:

<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 с с различными id с - вы можете поместить элементы управления для каждый шаг мастера в отдельный div. Чтобы проверить элементы управления div, вы захватываете все элементы ввода с помощью form.find, а затем вызываете valid() на этом наборе.

Answer 2

Воспользовавшись подстановочным знаком JQuery, назвали идентификаторы кнопок «next-1», «next-2» и т. Д. & Иды шагов имеют «шаг-1», «шаг-2» и так далее on, что позволяет иметь один, маленький кусок для обработки всех шагов.

$('[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'); 
    } 
}); 

На всякий случай, кто-то считает полезным :-)