Jquery 유효성 검사 성공 함수가 유효성을 다시 검사 할 때 유효한 레이블을 지우지 못합니까?

Question

JQuery Validate 플러그인을 사용하여 데이터의 유효성을 검사하는 양식이 있습니다. 사용자 이름 필드의 경우 (양식의 다른 필드는 제외) 사용자 이름을 사용할 수있는 경우 필드 옆에 "사용자 이름 사용 가능"을 표시하고 싶습니다.

나는 거의 효과가있다. 유일한 문제는 유효한 값을 입력 한 후 사용자가 사용자 이름을 편집 할 때 이전 유효 메시지가 절대로 제거되지 않으므로 필드 옆에 "사용 가능한 사용자 이름 사용 가능"또는 "사용 가능한 사용자 이름 사용 가능"또는 "사용 가능한 사용자 이름 사용 가능한 사용자 이름 사용 가능"입니다. "등등.

이 필드의 유효성을 다시 검사 할 때 이전의"Username available "메시지를 삭제하려면 어떤 변경이 필요합니까? 다음과 같이

내 JQuery와 성공의 기능은 다음과 같습니다

$("form").validate({ 
     success: 
      function(label) { 

       if (label.attr('for') == "username") { 
        var element = '#' + label.attr('for'); 
        label.removeClass("error").addClass("valid").text("Username available"); 
       } else { 
        label.removeClass("error"); 
       } 


     } 
    }); 

    $("#regForm").validate(); 
});   

Answer 1

나는 마침내 이것을 알아 냈습니다. validate 플러그인의 소스 코드를 살펴보면 유효한 레이블에서 "error"클래스를 제거하면 레이블이 유효성을 검사 할 때 다시 사용되지 않고 새 레이블이 만들어집니다.

제 해결 방법은 내 성공 함수에서 .removeClass()를 제거하고 스타일 시트의 유효한 클래스를 수정하여! 중요한 오류 클래스의 항목을 재정의하는 것이 었습니다.

새로운 검증 기능 :

$("form").validate({ 
    success: 
     function(label) { 

      if (label.attr('for') == "username") { 
       var element = '#' + label.attr('for'); 
       label.addClass("valid").text("Username available"); 
      } else { 
       label.addClass("invisiblevalid"); //ie. hide 
      } 


    } 
}); 

$("#regForm").validate(); 

});

수정 스타일 코드 :

label.error { 
background: url('check.gif') no-repeat; 
color: #FF0000; 
} 
label.valid { 
background: url('check.gif') no-repeat !important; 
color: #339900 !important; 
} 
label.invisiblevalid { 
display: none !important; 
} 

Answer 2

난 당신이 사용하고있는 플러그인을 정확하게 확실하지 않다. 그러나 나는 이런 모습이어야한다고 생각합니다.

$("form").validate({ 
    success: 
     function(label) { 

      if (label.attr('for') == "username") { 
       var element = '#' + label.attr('for'); 
       label.removeClass("error").addClass("valid").text("Username available"); 
      } else { 
       label.removeClass("error"); 
      } 


    }, 
    error: 
     function(label) { 

      if (label.attr('for') == "username") { 
       var element = '#' + label.attr('for'); 
       label.addClass("error").removeClass("valid").text("Username unavailable"); 
      } else { 
       label.addClass("error"); 
      } 


    } 
}); 

$("#regForm").validate(); 

Answer 3

사실 난 당신이 양식을 당신이 그렇게 분야 자체에 기능을 설정해야 재 검증 될 때까지 어느 사용자는 사용자 이름을 사용할 수 메시지를 제거 텍스트가 변경되었을 때에 기다리고 싶지 생각하지 않는다 하지만 충분히 자주 검증을한다면 걱정할 필요가 없습니다.

JavaScript가 잘 보이지만 다음과 같이 보이지 않는 레이블이있는 jQuery 텍스트를 사용하여 HTML이 올바르게 설정되어 있는지 확인해야합니다.

jQuery 페이지의 설명에 짧은 메모가 있습니다. here.

Answer 4

나는 해결책을 찾아 냈다.

기본적으로 클래스를 추가 한 후에 CSS가 업데이트되지 않으면 클래스 규칙이 무시되지 않습니다. 왜? 문제는 자바 스크립트 쪽이 아니라 CSS에 있습니다. 유효한 클래스는 몇있는 것으로 보인다