제출시 유효한/잘못된 양식 탭을 표시하는 jQuery 유효성 확인

Question

나는 탭이있는 양식과 사용자가 양식 탭을 이동하는 동안 유효성을 검사하는 간단한 기능이 있습니다. 나는 현재 부트 스트랩 'hidden.bs.tab'이벤트를 듣고있어

탭 유효성 검사 기능

var validateTab = function(element) { 

    var _element = $(element); 
    var validatePane = _element.attr('data-target'); 
    var isValid = $(validatePane + ' :input').valid(); 
    var _li = _element.parent(); 

    // console.log(validatePane + " - " + isValid); 

    if (isValid) { 
     _li.removeClass('alert-danger'); 
     _li.addClass('alert-success'); 
    } else { 
     _li.removeClass('alert-success'); 
     _li.addClass('alert-danger'); 
    } 
}; // end function validateTab 

을 (jQuery를, 부트 스트랩 및 jquery.validate 사용) 함수를 호출.

// Validate Tab on tab switch. 
$(document).on('hidden.bs.tab', 'a[data-toggle="tab"]', function(e) { 
    validateTab(e.currentTarget); 
}); 

위의 예상대로 작동하지만 양식을 제출할 때도이 작업을 수행하고 싶습니다. 마지막 탭이 유효 할 때 나는이 한 가지 예외와 함께 작동

invalidHandler: function(event, validator) { 
    console.log('invalid form'); 
    $('#myForm').append(
    '<div class="alert alert-danger alert-dismissable">' + 
    '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">' + 
    '&times;' + 
    '</button>' + 
    '<strong>Error: </strong>' + 
    '<span>Please correct the problems and try again.</span>' + 
    '</div>' 
); 

    // ADDED THIS CODE AND STARTED RUNNING INTO PROBLEMS. 
    var $tabs = $('#myTab li a'); 
    $tabs.each(function(key, ele) { 
    // IF last Tab of form is Valid form submits regardless of other errors. 
    validateTab(ele); 
    }); 

} 

을 확인 각 탭을 얻고 jQuery를의 invalidHandler에서 validateTab()()를 호출하는 간단한 루프를 추가 ... 형태가 갑자기 심지어이 경우 제출 다른 탭의 오류입니다. 이전 호출 또는 invalidHandler가 호출되기 전에 설정된 모든 호출을 유효한 대체 호출로 표시합니다. 갑자기 전체 양식이 성공적으로 검증 된 것처럼 제출됩니다.

전체 예제는 여기에서 찾을 수 있습니다. https://jsfiddle.net/qcean237/1/

현재 TAB 4에 대한 유효성 검사가 없으므로 양식을 제출하는 데 필요한 다른 필드가 없어도 매번 작동합니다.

실패한 제출물의 탭 모양을 업데이트하려면 다른 방식으로 또는 다른 위치에서 탭의 유효성을 검사해야합니까?

감사합니다, 나단

Answer 1

invalidHandler 만 불을 형태가 유효하고, 양식이 유효한 submitHandler에만 발생합니다. 즉, validateTab() 함수는 .valid()을 호출하여 유효성 검사를 트리거합니다. 즉 invalidHandler이 이미 양식이 잘못되었다는 것을 알고있을 때 invalidHandler의 유효성을 검사하여 플러그인을 깨뜨리는 것입니다. 이것이 사용자의 실패의 근원입니다. invalidHandler과 submitHandler은 유효성이 결정된 후에 만 ​​이라고 부릅니다 ... 동시에, 그렇지 않으면 어느 핸들러가 해고되어야 하는지를 알 수 없습니다. 버튼을 클릭하면 어쨌든, 단순히 validateTab()을 실행

...

$('button').on('click', function() { 
    var $tabs = $('#myTab li a'); 
    $tabs.each(function(key, ele) { 
     validateTab(ele); 
    }); 
}); 

DEMO : https://jsfiddle.net/qcean237/2/

Answer 2

당신은 invalidHandler 내부의 각 탭의 유효성을 검사하는 코드가 필요하지 않습니다. 양식을 제출할 때 탭이 이미 양식 안에 있으므로 모든 것이 유효하게됩니다.

단순히 여기에 invalidHandler

$tabs.each(function(key, ele) { 
    validateTab(ele); 
}); 

에서 다음 줄을 제거 위를 제거한 후 fiddle을하고 모든 것이 잘 작동합니다.