jQuery 유효성 검사 플러그인이 양식에서 유효성 검사를하지 않습니다. $ .validate()

Question

여러 텍스트 필드의 유효성을 검사하기 위해 jQuery 유효성 검사 플러그인을 사용하고있는 페이지가 있습니다. 이 여러 페이지에 버튼을 제출하고, 다음과 같이 나는 발리를 구성한 :

_validator = $("#ftsEditTripForm").validate({ 
    onkeyup: false, 
    submitHandler: function() {} 
}); 

나는 페이지의 모든 제출 버튼에 대해 다음 클릭 이벤트 핸들러를 등록 :이있다

function clickHandler(jqEvent) { 
    var action = jqEvent.target.id; 
    if (action !== "cancel") { 
     _form$.validate(); 
     if (_validator.numberOfInvalids() === 0) { 
      submitForm(action); 
     } 
    } else { 
     confirmCancel(action); 
    } 
} 
function submitForm(action) { 
    $(".flowEvent").attr("name", "_eventId_" + action); 
    if (action === "submit") { 
     $("input[name=status]").val("S"); 
    } else { 
     $("input[name=status]").val("D"); 
    } 
    _form$[0].submit(); 
} 

잘 작동 해. 사용자가 제출 버튼 중 하나를 클릭 할 때까지 유효성 검사가 수행되지 않고 해당 버튼이 취소 버튼 인 경우 페이지가 실제로 제출되기 전에 사용자가 페이지에서 변경 한 내용을 잃고 싶다는 확인 메시지가 표시됩니다. 따라서 사용자가 Cancel 버튼을 클릭 한 다음 No 버튼을 클릭하면 취소 작업을 계속하지 않으려 고 함을 의미하므로 페이지 제출을 중단합니다.

이제 탐색 바에 탭을 추가했습니다. 사용자가 지금있는 페이지의 탭 이외의 탭을 클릭하면 동일한 종류의 작업을 수행해야합니다. 탭이 된 div로 구현하고, 나는 그 div에 대해 다음 클릭 이벤트 처리기를 정의했습니다 :

function tabClickHandler(jqEvent) { 
    var target = jqEvent.target; 
    while (! $(target).hasClass("navTab")) { 
     target = target.parentNode; 
    } 
    var tabNumber = target.dataset.tabnumber; 
    _form$.validate(); 
    if (_validator.numberOfInvalids() === 0) { 
     $("input[name=tabNumber]").val(tabNumber); 
     submitForm("navbar"); 
    } 
} 

내 문제는 내가 탭을 클릭하면 _validator.numberOfInvalids()는 항상 0을 반환한다는 것입니다. 유효성 검사 코드에 중단 점을 넣었고 탭을 클릭해도 호출되지 않습니다. 따라서 유효성 검사 오류가 있더라도 페이지는 항상 제출됩니다.

여러 가지를 시도해 보았습니다. 유효성 검사 플러그인의 onsubmit 및 submitHandler 옵션에 대한 다양한 값으로 탭 div를 버튼으로 변경하여 성공하지 못했습니다.

누군가가 올바른 방향으로 나를 가리킬 수 있기를 바랍니다. 이 작업을 다른 방법으로 수행해야하며 유효성 검사 플러그인을 계속 사용하고 싶습니다.

지금까지 읽어 주셔서 감사합니다.

톰

Answer 1

이것은 무엇입니까?

_form$.validate(); 

나는이 (_form$) 같은 이름의 변수

당신은 .validate() 방법은 양식에 플러그인을 초기화에 사용되는 것을 알아야한다 본 적이 없어.

function clickHandler(jqEvent) { 
    var action = jqEvent.target.id; 
    if (action !== "cancel") { 
     _form$.validate(); 

    .... 

버튼을 클릭 할 때까지 초기화하지 않으면 아무런 유효성 검사도 수행하지 않습니다.

일반적으로 .validate()은 DOM 준비 이벤트 핸들러 내에서 한 번만 호출되며 클릭 이벤트는 자동으로 캡처됩니다. 모든 후속 인스턴스가 무시되므로 .validate() 번을 두 번 이상 호출 할 수 없습니다.

무시하려는 버튼이 cancel이므로 취소 버튼을 누르면 .rules('remove') 메서드를 사용하여 유효성 검사를 효과적으로 취소 할 수 있습니다. 이게 뭔가 ...

$('#myCancelButton').on('click', function(e) { 
    e.preventDefault(); 
    $('input, select, textarea').each(function() { 
     $(this).rules('remove'); // remove all rules 
    }); 
    // something to do on cancel 
    confirmCancel(action); 
});