Extender를 사용하여 Knockout.js 유효성 검사 -로드시 유효성 검사 금지

녹아웃 웹 사이트 (http://knockoutjs.com/documentation/extenders.html)에 제안 된 예제를 기반으로 "이름"에 대한 매우 기본적인 필수 검증을 구현했습니다. - 라이브 예제 2 : 관찰 가능에 유효성 검사 추가.Extender를 사용하여 Knockout.js 유효성 검사 -로드시 유효성 검사 금지

제 문제는 양식을 처음로드 할 때 유효성 검사가 실행되는 것을 원하지 않는다는 것입니다. "크롬"에서 작품 - 다음은 내 코드

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Test</title> 
<link href="Style.css" rel="stylesheet" /> 
</head> 
<body> 
<p data-bind="css: { error: firstName.hasError }"> 
    <span>First Name</span> 
    <input data-bind='value: firstName, valueUpdate: "afterkeydown"' /> 
    <span data-bind='visible: firstName.hasError, text: firstName.validationMessage'></span> 
</p> 
<p> 
    <span>Last Name</span> 
    <input type="text" data-bind="value: lastName, valueUpdate: 'afterkeydown'" /> 
</p> 

<div data-bind="text: fullName" /> 
<script src="Scripts/jquery-2.0.3.js"></script> 
<script src="Scripts/knockout-2.3.0.debug.js"></script> 
<script src="script.js"></script> 
</body> 
</html> 

var AppViewModel = function() { 
var firstName = ko.observable().extend({ required: "Please enter First Name" }), 
    lastName = ko.observable(), 
    fullName = ko.computed(function() { 
     return firstName() + " " + lastName(); 
    }); 
return { 
    firstName: firstName, 
    lastName: lastName, 
    fullName: fullName 
}; 
}; 


ko.extenders.required = function (target, overrideMessage) { 
//add some sub-observables to our observable 
target.hasError = ko.observable(); 
target.validationMessage = ko.observable(); 

//define a function to do validation 
function validate(newValue) { 

    target.hasError($.trim(newValue) ? false : true); 
    target.validationMessage($.trim(newValue) ? "" : overrideMessage || "This field is required"); 
} 

//initial validation 
validate(target()); 

//validate whenever the value changes 
target.subscribe(validate); 

//return the original observable 
return target; 
}; 



var viewModel = new AppViewModel(); 
ko.applyBindings(viewModel);

당신은 내가이 링크 http://jsfiddle.net/tCP62/22/``

내가 제공 한 JSFiddle 링크가 문제를 보여주는 데모를 할 수 있습니다에 직면하고 문제의 데모를 볼 수 있습니다 IE에서는 작동하지 않습니다.

제발 누구든지이 문제를 해결할 수 있습니다.

감사합니다, Ankush

출처

2013-07-19 ankush.net

그냥 다음 줄을 제거하고 당신이 원하는 일을해야

: 그것은 위가 포함되어 있기 때문에

//initial validation 
validate(target());

required 연장이 때 페이지가로드 호출되는, 및 호출하면 유효성 검사가 즉시 트리거됩니다. 다음 코드 행 target.subscribe(validate);은 관찰 가능 값이 변경 될 때 (주석에 명시된대로) 트리거되도록합니다. 이 모든 경우에 필요한 것입니다.

출처

2013-07-19 10:15:43 Robbie

대단히 고마워. 나는 물건의 웅대 한 계획에서 그것을 단지 볼 수 없었다. 스택 오버플로에 게시하기 전에 어제 4 시간과 버디 4 시간을 소비했다. 하지만, 당신은 내 하루를 보냈습니다. 다시 감사합니다. –

이제 다른 문제가 있습니다. 저장 버튼 클릭시 유효성 검사를 호출하여 오류가있는 컨트롤이 강조 표시되도록하려고합니다. 위의 내용을 바탕으로 저장하기 전에 "validate"를 호출하여 "hasError"속성을 확인할 수 있습니다. 그러나 "firstName"에 대해 두 가지 유효성 검사가있는 경우 - "required"와 firstName이 "A"로 시작해야하며 다른 Extender가 있어야한다고 말합니다. 이 시나리오에서는 각 Extender에서 유효성 검사 메서드의 이름을 다르게하고 유효성 검사가 필요한 각 관찰 가능 항목에 대해 모든 유효성 검사 메서드를 호출해야합니까? 어떤 도움이라도 대단히 감사합니다. –

Extender를 사용하여 Knockout.js 유효성 검사 -로드시 유효성 검사 금지

답변

관련 문제