2013-02-21 2 views
0

knokcout.js 및 knockout.validation 플러그인을 사용하고 있습니다. 유효성 검사 메시지가있는 코드에 문제가 있습니다. 내가 단일 문자를 입력 할 때 이제 내 문제가잘못된 검증 메시지가 녹아웃으로 표시됩니까?

.. 
this.Password = ko.observable().extend({ 
     required: { message: "Enter password" }, 
     minLength: { params: 6, message: "Must be 6 chars long" } 
}); 
.. 

<input type="password" data-bind="value: Password, valueUpdate:'afterkeypress" 
    placeholder="Password" /> 

HTML을에서 JS 코드에서 : 내가 좋아하는 (암호 말) 관찰 필드에 2 검증을 적용 암호는 유효 메시지 (Must be 6 chars long)을 표시하는 대신에 (Enter password)이라는 메시지를 표시하고, 두 번째 문자를 입력 할 때보 다 그것이 메시지 (Must be 6 chars long)을 보여주는 것보다 낫습니다. 그리고이 동작은 유효성 검사를 적용한 모든 필드에서 발생합니다. 아무도 문제가 어디 있는지 말해 줄 수 있습니까?

+0

가 및 onblur 이벤트에 afterkeypress 이벤트를 대체하여 확인합니다. – akeeseth

+0

나는 이것을 keypress, keyup 및 onBlur로 이미 확인했지만 작동하지는 않는다. – gaurav

답변

1

코드가 'afterkeypress'가 아닌 'keypress'에 반응하고있는 것 같습니다. 샘플 html에서 'afterkeypress'다음에 작은 따옴표가 누락되었습니다.

설명서에 'afterkeypress'가 실제로 updateValue 옵션으로 나열되어 있지 않지만 내 테스트에서 제대로 작동하는 것 같습니다. 당신은 또한 바인딩 valueUpdate라는 매개 변수가 포함되어있는 경우

From documentation for value binding

이 는 KO가 변경 이벤트 외에 변경 을 감지하는 데 사용해야 추가 브라우저 이벤트를 정의합니다. 사용자가 키
  • "키 누름이"놓을 때 뷰 모델을 업데이트 - -

    • "의 keyup"는 사용자가 키를 입력했을 때 뷰 모델을 업데이트 : 다음 문자열 값은 가장 일반적으로 사용되는 선택이다 . 키 업과 달리 사용자가 키를 누른 상태에서 반복적으로 업데이트됩니다.
    • "afterkeydown"- 사용자가 문자 입력을 시작하자마자 뷰 모델을 업데이트합니다. 이것은 브라우저의 keydown 이벤트 을 catch하고 비동기 적으로 이벤트를 처리하여 작동합니다.

    보기 모델을 실시간으로 업데이트하려면 "afterkeydown"이 가장 적합합니다.

  • 최상의 결과를 얻으려면 'afterkeydown'옵션을 사용하는 것이 좋습니다. 그 경우에 해당합니다.

    'keypress', 'afterkeypress'및 'afterkeydown'을 사용하는 샘플을 만들었습니다.

    참조 : http://jsbin.com/anerop/3/edit (validatedObservable; 참고 : "JS와 함께 실행"버튼 클릭) 'afterkeydown는'최상의 사용자 경험을 제공 할 것으로 보인다 바인딩

    합니다. 'afterkeypress'는 컨트롤이 포커스를 잃을 때까지 업데이트되지 않습니다.

    샘플 데이터 바인딩은 :

    <input type="password" data-bind="value: Password, valueUpdate:'afterkeydown'" 
        placeholder="Password" /> 
    

    나는 validatedObservable을 사용하지 않은 또 다른 예를 생성하고 비슷한 결과를 얻었다.

    참조 : http://jsbin.com/itatic/1/edit (안 validatedObservable; 참고 : 버튼을 클릭합니다 "JS와 함께 실행")

    관련 문제