내 질문을 설명하는 데 도움이 JSFiddle을 만든 블러

에 유효성 검사 : http://jsfiddle.net/jeffreyrswenson/CrYWn/5/내 질문을 설명하는 데 도움이 JSFiddle을 만든 블러

가 여기에 내가보고 싶은 내용은 다음과 같습니다

메시지 때 페이지가로드 나타나지 않아야합니다.
제출 버튼을 누르면 메시지가 표시됩니다.
메시지는 입력 값이 변경되고 사용자가 요소를 떠난 후에 나타나야합니다. (탭 또는 클릭을 다음 필드로 이동)
사용자가 입력을 변경하지 않고 메시지를 표시해야합니다 (예 : 필드가 필요하며 사용자가 필드를 탭하지만 값을 입력하지 마십시오. 유효성 검사 메시지가 나타나면 나타납니다.)

예상대로 처음 네 가지가 작동합니다. 마지막 항목이 가능합니까? 그렇다면 해당 동작을 사용하려면 무엇을 변경해야합니까?

HTML :

<label>First name: 
<input data-bind='value: firstName' /> 
</label> 
<br/> 
<label>Last name: 
    <input data-bind='value: lastName' /> 
</label> 
<br/> 
<button type="button" data-bind='click: submit'>Submit</button> 
<br/> 
<span data-bind='text: errors().length'></span> errors

뷰 모델 :

var viewModel = function() { 
     ko.validation.configure({ 
      decorateElement: true, 
      registerExtenders: true, 
      messagesOnModified: true, 
      insertMessages: true, 
      parseInputAttributes: true, 
      messageTemplate: null 
     }); 

     this.firstName = ko.observable().extend({ 
      required: true 
     }); 
     this.lastName = ko.observable().extend({ 
      required: true, 
      pattern: { 
       message: 'Hey this doesnt match my pattern', 
       params: '^[A-Z0-9]+$' 
      } 
     }); 

     this.submit = function() { 
      if (this.errors().length == 0) { 
       alert('Thank you.'); 
      } else { 
       this.errors.showAllMessages(); 
      } 
     }; 
     this.errors = ko.validation.group(this); 
    };

출처

2014-01-29 Jeff

당신은 당신이 추가 이벤트를 지정할 수있는 재산의 변화를 트리거 할 value binding의 표준 valueUpdate 옵션을 사용할 필요가

하고 그 유효성 검사 .

그래서 당신은 당신의 바인딩에 valueUpdate: "blur" 설정을 추가해야합니다

<label>First name: 
    <input data-bind='value: firstName, valueUpdate: "blur"' /> 
</label> 
<br/> 
<label>Last name: 
    <input data-bind='value: lastName, valueUpdate: "blur"' /> 
</label>

데모 JSFiddle합니다.

출처

2014-01-29 07:43:06 nemesv

필자는 입력에 값이있는 경우 일부 필드가 보이도록 만들기 때문에 필자는 키를 누른 후 값을 업데이트해야한다고했습니다. 기본 값을 업데이트하고 싶었지만 사용자가 다음 입력을 탭하기 전까지 유효성 검사가 표시되기를 원하지 않았습니다.

CSS와 바인딩의 부부의 비트가 나를 위해 일한 것입니다 :

CSS :

div.validationWrapper.standard-focus.has-focus .validationMessage 
{ 
    display: none; 
}

HTML :

<div class="validationWrapper standard-focus" data-bind="css: { 'has-focus': MyObservableHasFocus() }"> 
    <input class="standard-focus" type="text" data-bind="hasFocus: MyObservableHasFocus, value: MyObservable, valueUpdate: 'afterkeydown'" /> 
</div>

넉 아웃 :

self.MyObservable = ko.observable('').extend({/* Your validation here */}); 
self.MyObservableHasFocus = ko.observable(false);

결과는 관찰이다. 그것은 키 업 후에 값을 업데이트하고 포커스를 잃은 후에 유효성 검사 메시지를 보여줍니다.

출처

2016-03-16 13:23:31 Daryl

내 질문을 설명하는 데 도움이 JSFiddle을 만든 블러

답변

관련 문제