1

jQuery-Validation-Engine을 사용하여 양식의 유효성을 검사하지만 문제가 발생했습니다 ... div에 양식이 있습니다.jQuery-Validation-Engine 필드 숨김 위치 팝업 (jquery tabs)

$(".test").validationEngine({validateNonVisibleFields: true}); 

에 활성 비 활성 탭 ....하지만 비 활성 탭에있는 필드의 팝업 오류의 필드에 모두 좋은 작품을 제출되지 않습니다 탭에 나는이 같은 validationEngine 설정 해당 필드에 정렬됩니다.

_calculatePosition 기능은 필드 숨겨진 확인 ...

어떤 제안의 실제 좌표를 무시하는 것 같다? 많은

답변

1

덕분에 나는 각 탭에 대한 validationEngine updatePromptsPosition 방법을 사용하여 ... 이런 식으로 뭔가를 같은 문제를 해결 한 :

$(".tabs-1").click(function(){ 
    $form.find('form').validationEngine('updatePromptsPosition'); 
}); 
1

이 질문에 제대로 대답하지 않은 사실 솔직히 솔직히 솔루션의 단순성을 고려하면 바보입니다. 사용자가 탭을 전환 할 때마다 유효성 검사를 호출하고 간단하게 탭을 설정하면됩니다.

여러 탭에 걸쳐있는 다음 양식이있는 경우 ...

그런 다음
<form id="myForm" action=""> 
<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Tab 1</a> 

     </li> 
     <li><a href="#tabs-2">Tab 2</a> 

     </li> 
     <li><a href="#tabs-3">Tab 3</a> 

     </li> 
    </ul> 
    <div id="tabs-1"> 
     <input type="text" id="requiredFiled" name="requiredField" class="validate[required]" /> 
    </div> 
    <div id="tabs-2"></div> 
    <div id="tabs-3"></div> 
</div> 

이 같은 형태와 탭을 설정 :

jQuery("#myForm").validationEngine('attach', { 
    promptPosition: "bottomLeft", 
    validationEventTrigger: "submit", 
    validateNonVisibleFields: true, 
    updatePromptsPosition: true 
}); 

$(function() { 
    $("#tabs").tabs({ 
     beforeActivate: function (event, ui) { 
      if (!$("#myForm").validationEngine('validate')) { 
       event.preventDefault(); 
       $('#myForm').validationEngine('hide'); 
       setTimeout(function() { 
        $("#myForm").validationEngine('validate'); 
       }, 450); 
      } 
     } 
    }); 
}); 

결과는 탭은 사용자가 C 인 경우 사용자가 다른 탭을 선택 할 수 없다는 것입니다 유능한 것은 완전히 유효하지 않습니다. 다음은 JSFiddle 데모입니다. http://jsfiddle.net/g9yLL/36/

건배! :-)