4
온 전성 검사를 찾으십시오. 나는 최근에 녹아웃을 배우기 시작했으며 기존의 다단계 형식을 변환하도록 지시 받았다.유효성 검사가 포함 된 녹아웃 -JS 다단계
기본 아이디어는 사용자가 계속 진행하기 전에 각 단계의 유효성을 검사하는 것입니다. 또한 앞으로 계속할 것인지 또는 모든 현재 데이터 (예 : 자격이없는 경우)를 사용하여 제출할 것인지 결정하는 특정 제한이 설정됩니다 (표시되지 않음).
<form id="register">
<fieldset>
<h2>About You</h2>
<ul>
<li>
<label for="firstName">First Name:</label>
<input type="text" data-bind="value: firstName" required="required" />
</li>
<li>
<label for="lastName">Last Name</label>
<input type="text" data-bind="value: lastName" required="required" />
</li>
</ul>
</fieldset>
<fieldset>
<h2>Your Business</h2>
<ul>
<li>
<label for="businessName">Business Name:</label>
<input type="text" data-bind="value: businessName" required="required" />
</li>
<li>
<label for="currentCustomer">Were you referred by someone?</label>
<input type="checkbox" data-bind="checked: referred" />
</li>
</ul>
</fieldset>
<fieldset>
<h2>User Info</h2>
<ul>
<li>
<label for="userName">Referrer's First Name:</label>
<input type="text" data-bind="value: referralFirst" required="required" />
</li>
<li>
<label for="password">Referrer's Last Name:</label>
<input type="password" data-bind="value: referralLast" required="required" />
</li>
</ul>
</fieldset>
</form>
<div class="nav-buttons"> <a href="#" data-bind='click: stepForward'>Continue</a>
<a href="#" data-bind='click: stepBack'>Back</a>
<a href="#" data-bind='click: resetAll'>Cancel</a>
</div>
JS :
$("#register").children().hide().first().show();
ko.validation.init({
parseInputAttributes: true,
decorateElement: true,
writeInputAttributes: true,
errorElementClass: "error"
});
function myViewModel() {
var self = this;
//observable init
self.firstName = ko.observable();
self.lastName = ko.observable();
self.businessName = ko.observable();
self.referred = ko.observable();
self.referralFirst = ko.observable();
self.referralLast = ko.observable();
//validaiton observable init
self.step1 = ko.validatedObservable({
firstName: self.firstName,
lastName: self.lastName
});
self.step2 = ko.validatedObservable({
businessName: self.businessName,
referred: self.referred
});
self.step3 = ko.validatedObservable({
referralFirst: self.referralFirst,
referralLast: self.referralLast
});
//navigation init
self.currentStep = ko.observable(1);
self.stepForward = function() {
if(self.currentStep()<4){
self.changeSection(self.currentStep() + 1);
}
}
self.stepBack = function() {
if (self.currentStep() > 1) {
self.changeSection(self.currentStep() - 1);
}
}
self.changeSection = function(destIdx){
var validationObservable = "step" + self.currentStep();
if(self[validationObservable]().isValid()){
self.currentStep(destIdx);
$("#register").children().hide().eq(self.currentStep() - 1).show();
return true;
}else{
self[validationObservable]().errors.showAllMessages();
}
return false;
}
self.resetAll = function(){
//TODO
return false;
}
}
ko.applyBindings(new myViewModel());
http://jsfiddle.net/dyngomite/BZcNg/
HTML (실제 형태는도 4 단계에 걸쳐 40 필드를 포함)
내 질문 :
모든 필드를 처음 관찰 가능으로 선언 한 다음 validatedObservables()에 함께 클러스터링하는 것이 합리적입니까?
마지막으로 전체 양식을 제출하려는 경우 ko.toJSON (self.step1())을 사용하여 각 단계를 연결하는 것보다 더 똑똑한 방법이 있습니까? 모든 입력 관측 값을 포함하는 "완전한 형식"관측 가능을 만들어야합니까? 즉, 전체 양식을 직렬화하는 가장 좋은 방법은 무엇입니까? ko.toJSON (self)를 사용하고 싶습니까?
양식을 초기 구성으로 재설정하는 가장 좋은 방법은 무엇입니까? ko.applyBindings (new myViewModel())을 다시 적용 할 수 있습니까?
이 문제는 올바르게 적용됩니까?
설명해 주셔서 감사합니다.
감사합니다. currentStep()에 대한 가시성을 바인딩하는 것이 더 깨끗한 접근법임을 알 수 있습니다. 1. 모든 기본 기능을 재 작성한 후 매핑 플러그인을 통합 할 계획입니다. 2. ko.toJS()를 사용하고 전달되는 필드를 제한해야한다는 것이 맞다고 생각합니다. 3. 흥미 롭지 만 KO 템플릿을 사용해야합니까? 이 경우 div # 컨텍스트 내부뿐만 아니라 스크립트 태그 내부에 양식 마크 업을 갖습니다. 템플릿을 피하고 문서의 전역 변수에 HTML 형식으로 저장 한 다음 나머지 절차를 수행하는 것은 좋지 않은 아이디어입니까? – lyma