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을 사용하여 양식 컨트롤의 유효성을 검사 할 수 있습니다. 예를 들어 : - 당신을위한 컨트롤을 넣을 수

// 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 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> 

그런 다음 당신은 .click() 핸들러에 .btn-input-contact-info 버튼을 결합하는 것 각 마법사는 별도의 div에 들어갑니다. 특정 div의 컨트롤을 확인하려면 form.find을 사용하여 모든 입력 요소를 가져온 다음 해당 세트에서 valid()으로 전화하십시오.

Answer 2

JQuery의 와일드 카드 선택을 이용하여 버튼의 이름을 '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'); 
    } 
}); 

그냥 경우는, 어떤 사람은 도움이 :-)