knockout.js 유효성 검사 입력란 강조 표시

유효성 확인 작업을하고 있으며보기 모달에 knockout.js (및 durandal.js)를 사용하고 있습니다.knockout.js 유효성 검사 입력란 강조 표시

제출 버튼을 클릭하면 입력란이 비어있을 때 텍스트 테두리를 빨간색으로 만들고 싶습니다.

사용자가 텍스트 상자에 입력을 시작하면 테두리 색 빨간색이 제거되어야합니다.

코드는 여기에 있습니다 : 내가 무슨 짓을 http://jsfiddle.net/LvHUD/1/

입니다 : 다음은

<input type="text" data-bind="value: username, css:{'error':showErrors}" />

는

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="Scripts/knockout.debug.js"></script> 
    <script src="Scripts/knockout.js"></script> 
    <script src="Scripts/knockout.validation.debug.js"></script> 
    <script src="Scripts/knockout.validation.js"></script> 
</head> 
<body> 
    <input type="text" data-bind='value: username' /> 
    <br /> 
    <button data-bind="click: submit">Submit</button> 
    <div data-bind="visible: showErrors, text: errors" /> 
    <script> 
     function ViewModel() { 
      var self = this; 
      self.username = ko.observable().extend({ 
       required: true 
      }); 
      self.showErrors = ko.observable(false); 

      self.submit = function() { 
       self.showErrors(true); 
       if (self.isValid()) { 
        // save data here 
       } 
      } 

      self.errors = ko.validation.group(self); 
     } 

     ko.validation.init({ 
      registerExtenders: true, 
      messagesOnModified: true, 
      insertMessages: false 
     }); 

     ko.applyBindings(new ViewModel()); 
    </script> 
</body> 
</html>

출처

2013-08-27 patel

흠, 여기에 어떤 Durandal을 확인할 수 없습니다. 태그를 제거하고 질문을 업데이트 할 것을 제안 할 수 있습니까? – RainerAtSpirit

당신은 녹아웃이 입력 상자에 오류 클래스를 추가하는 바인딩 CSS 사용할 수 있습니다 jsFiddle : http://jsfiddle.net/bradleytrager/tBcRD/

추가 : 사용자가 입력 할 때 강조 표시를 제거하려면 한 가지 방법은 관찰 결과가 변경 될 때 오류 메시지를 제거하기 위해 키 다운 이벤트에서 관찰 가능을 업데이트하고 관찰 가능 항목에 등록하는 것입니다. HTML :

<input type="text" data-bind="value: username, css:{'error':showErrors}, valueUpdate: 'afterkeydown'" />

JS :

self.username.subscribe(function() { 
    self.removeErrors(); 
}); 
self.removeErrors = function() { 
    self.showErrors(false); 
};

I이 기능으로 jsFiddle 업데이트.

출처

2013-08-27 13:31:32

맞지만 원하는게 있는데 .. 사용자가 texbox를 타이핑하기 시작하면 빨간색 테두리 색상이 제거되어야합니다. 유효성 검사 메시지가 없습니다 :이 필드는 필수 항목입니다 (빨간색 만 강조 표시됨) – patel

기능. –

이런 일들을 위해서 나는 parsley.js (http://parsleyjs.org/)를 사용합니다. 이 모든 일들을 매우 쉽게 처리합니다. –

넉 아웃 유효성 검사는 관찰 가능 개체 2 개의 관찰 가능 개체를 추가합니다. isValid & isModified. isValid observable을 사용하여 찾고있는 것을 얻을 수 있습니다. 다음

http://jsfiddle.net/tBcRD/3/

기본적으로 데이터 바인딩 속성이 변경되었다 :

가

<input type="text" data-bind="value: username, valueUpdate: 'afterkeydown', css:{'error':(!username.isValid() && showErrors())}" />

출처

2013-08-27 14:05:07 epignosisx

감사합니다. 사용하지 않습니까? https : // github.com/Knockout-Contrib/Knockout-Validation/wiki/Configuration, 여기에 몇 가지 옵션이 있습니다. errorElementclass가 도움이 될 것입니다. – patel

사항이위한 바인딩 validationElement를 사용할 수있다 (wiki)를 I 약간 브래들리 Trager 의해 제공된 jsfiddle를 수정 :

http://jsfiddle.net/tBcRD/10/

HTML :

<input type="text" data-bind="value: username, validationElement: username, valueUpdate: 'afterkeydown'" /> 
<br/> 
<button data-bind="click: submit">Submit</button>

JS :

function ViewModel() { 
    var self = this; 
    self.username = ko.observable().extend({ 
     required: true 
    }); 

    this.validationModel = ko.validatedObservable({ 
     username: self.username 
    }); 

    self.submit = function() { 
     self.username.valueHasMutated(); 
     if (this.validationModel.isValid()) { 
      alert("data saved"); 
     } 
    } 
} 

ko.validation.init({ 
    registerExtenders: true, 
    messagesOnModified: true, 
    insertMessages: false, 
    decorateElement: true 
}); 

ko.applyBindings(new ViewModel());

CSS :

.validationElement { 
    border: 1px solid red; 
}

출처

2013-08-27 14:24:53 mhu

감사합니다.하지만이 오류가 있습니다. http://postimg.org/image/p7j96j0s3/ – patel

예가 아닙니다. 일하고있어! 여기를보십시오 : http://jsfiddle.net/tBcRD/7/ – patel

그저 당신의 코드입니다. 이것 좀 봐 : http://stackoverflow.com/a/13042280/932282. 나는 바이올린을 업데이트했다 : http://jsfiddle.net/tBcRD/8/. – mhu

knockout.js 유효성 검사 입력란 강조 표시

답변

관련 문제