.NET MVC 3에서 jQuery의 눈에 거슬리지 않은 유효성 확인 - 성공 표시 check

Question

.NET MVC 프로젝트 내에서 jQuery의 눈에 거슬리지 않은 유효성 검사를 사용하면 정상적으로 작동하는 것 같습니다. 필드가 올바르게 검증되면 (클라이언트 측 및/또는 원격) 녹색 체크 표시를 표시하려고합니다.

<div class="clearfix"> 
     @Html.LabelFor(model => model.Address1, "Street") 
     <div class="input"> 
      @Html.TextBoxFor(model => model.Address1, new { @class = "xlarge", @maxlength = "100", @placeholder = "e.g. 123 Main St" }) 
      <span class="help-message"> 
       @Html.ValidationMessageFor(model => model.Address1) 
       <span class="isaok">Looks great.</span> 
      </span> 
      <span class="help-block">Enter the street.</span> 
     </div> 
    </div> 

내가 뭘하려는 것은 차례로 배경 이미지에 체크 표시가있는 "span.isaok"에 클래스 '활성'을 추가 할 수 있습니다 :

다음은 샘플 필드 선언입니다.

내가 사용 시도 하이라이트/unhighlight :

$.validator.setDefaults({ 
onkeyup: false, 

highlight: function (element, errorClass, validClass) { 
    $(element).addClass(errorClass).removeClass(validClass); 
    $(element.form).find("label[for=" + element.id + "]").addClass("error"); 
    $(element).parent().find("span.isaok").removeClass("active"); 
}, 
unhighlight: function (element, errorClass, validClass) { 
    $(element).removeClass(errorClass).addClass(validClass); 
    $(element.form).find("label[for=" + element.id + "]").removeClass("error"); 
    if ($(element).val().length > 0) { 
     $(element).parent().find("span.isaok").addClass("active"); 
    } 
} 

});

하지만 비어 있어도 모든 입력란에 녹색 체크 표시가 나타납니다. (따라서 분명히 잘못)

나는 '성공'옵션을 사용하여 시도했지만 결코 해고 된 것 같지 않습니다.

무엇이 누락 되었습니까?

편집

: 그래서 나는 this blog post을 발견하고

$(function() { 
    var settings = $.data($('form')[0], 'validator').settings; 
    settings.onkeyup = false; 
    settings.onfocusout = function (element) { $(element).valid(); }; 

    var oldErrorFunction = settings.errorPlacement; 
    var oldSuccessFunction = settings.success; 
    settings.errorPlacement = function (error, inputElement) { 
     inputElement.parent().find("span.isaok").removeClass("active"); 
     oldErrorFunction(error, inputElement); 
    }; 
    settings.success = function (label) { 
     var elementId = '#' + label.attr("for"); 
     $(elementId).parent().find("span.isaok").addClass("active"); 
     oldSuccessFunction(label); 
    }; 
}); 

즉 성공의 기능을 활용할 수 있었다하지만 지금 폼이 유효하지 않은 경우는 오류 메시지와 유효 마크를 모두 보여줍니다 .. .

후자는 곧 페이지에서 아무 곳이나 클릭으로 사라집니다. 하나는 비슷한 문제가 경우

Answer 1

, 나는 마침내 jquery.validate.unobtrusive.js의 취소 축소 된 버전을 사용하고의 OnError와는 onSuccess 방법에 내 JS를 추가하여이 작업을 얻었다. 기존 코드는 그대로 남았습니다. 배포 중에 다시 축소 된 버전을 사용하십시오.

감사합니다.

Answer 2

이 문제는 나중에 $.validator.setDefault에 추가되는 설정을 방해하는 jquery.validate.unobtrusive에서 발생하는 것으로 보입니다. 요령은 사용자 정의 설정 인 다음에 눈에 잘 띄지 않는 스크립트 을로드하는 것입니다. here을보고 고치기 위해 here으로 투표하십시오.

Answer 3

귀하의 질문에 대한 직접적인 답변이 아닙니다. 이에 대한 대체 접근법을 제안하려고합니다 : TwitterBootstrapMVC. 당신이 가진 것 모두가 각 입력에 대해 쓸 수있는이 라이브러리와

은 다음과 같습니다

@Html.Bootstrap().ControlGroup().TextBoxFor(m => m.Address1) 

그리고 바로 그거야. 자바 스크립트가 없으면 라벨, 입력 및 유효성 확인 메시지가 표시됩니다. 그것은 당신을 위해 적절한 HTML 마크 업을 생성합니다. 당신은 단지 .field-validation-error, .field-validation-valid ...