2011-03-23 9 views
10

MVC 3에서 원격 유효성 검사를 사용하고 있지만 필드가 활성화 된 두 번째 시간 인 경우 무언가를 입력하면 언제든지 작동하는 것처럼 보입니다. 문제는 자동 완성 상자가있어 결과를 클릭하여 필드를 채우는 것입니다. MVC는이 필드를 "떠나는"것으로 간주합니다.흐림 효과 만있는 ASP.NET 원격 유효성 검사?

자동 완성 된 것 이외에도 필자는 작성 중반에 유효성 검사를 시도하지 않으려 고합니다. "입력이 끝나면 유효성 검사를 n 밀리 초 만 실행"또는 "흐려짐에 대해서만 유효성 검사 만 실행"이라고 말할 수있는 방법이 있습니까?

답변

18

MVC 3은 클라이언트 측 유효성 검사를 위해 jQuery 유효성 검사 플러그인을 사용합니다. 키 업시 유효성을 검사하지 않도록 플러그인을 구성해야합니다.

당신은 세계적으로 http://docs.jquery.com/Plugins/Validation/Validator/setDefaults 여기 http://docs.jquery.com/Plugins/Validation/validate onKeyUp에 옵션을 참조하십시오

$.validator.setDefaults({ 
    onkeyup: false 
}) 

를 사용하여 오프를 전환 할 수 있습니다.

+0

내 .js의 $ (document) .ready() 부분에 추가했으며 모든 키를 누른 후에도 유효성을 검사합니다. –

2

나중에 참조하기 위해 typeWatch 플러그인 (http://archive.plugins.jquery.com/project/TypeWatch)과 함께이 작업을 수행 할 수 있음을 발견했습니다.

기본적 싶은 것은 (슬러그 내 경우)입니다 :

/*Disable keyup validation on focus and restore it to onkeyup validation mode on blur*/ 
$("form input[data-val-remote-url]").on({ 
    focus: function() { 
     $(this).closest('form').validate().settings.onkeyup = false; 
    }, 
    blur: function() { 
     $(this).closest('form').validate().settings.onkeyup = $.validator.defaults.onkeyup; 
    } 
}); 

$(function() { 
    /*Setup the typeWatch for the element/s that's using remote validation*/ 
    $("#Slug").typeWatch({ wait: 300, callback: validateSlug, captureLength: 5 }); 
}); 

function validateSlug() { 
    /*Manually force revalidation of the element (forces the remote validation to happen) */ 
    var slug = $("#Slug"); 
    slug.closest('form').validate().element(slug); 
} 

당신은 바닐라 typeWatch 플러그인을 사용하는 경우, 당신은 때문에 모든 요소에 대한 설정에 typeWatch을해야합니다 typeWatch 콜백은 $ (this)를 통해 현재 요소에 대한 액세스를 제공하지 않으며 값만 전달합니다.

또는 요소 (timer.el)에서 전달하도록 typeWatch 플러그인을 수정 한 다음 모든 사용자에게 지연을 적용 할 수 있습니다.

+0

이것은 나를 위해 일한 유일한 접근법입니다. 그것은 마치 jQuery 유효성 검사가 onkeyup 및 onfocusout 요소를 존중하지 않는 것처럼 보입니다. 이것을 false, false, ""또는 false를 반환하는 함수로 설정하면 아무 것도하지 않습니다. 위와 같이 폼 - 레벨 설정을 토글 (typewatch없이)하면 효과가있었습니다. –

0

자동 완성 제안 목록이 튀어 나오면 자동 완성 텍스트 상자 "DealingWithContactName"에 초점을 맞추는 것과 동일한 문제가있었습니다. 여기서 사용자가 동적으로 생성 한 자동 완성 목록 항목을 선택하고 여기에 포커스를 설정합니다. 50ms 후에 우리는 텍스트 상자에서 초점을 잡습니다. 그것은 우리의 문제를 해결했습니다.

$('body').on('click', 'ul.ui-autocomplete li a', function() { 

     $('#DealingWithContactName').focus(); 

     window.setInterval(function() { 
      $('#DealingWithContactName').blur(); 
     }, 50); 
});