Sprawdzanie poprawności Knockout.js przy użyciu przedłużaczy - zapobieganie walidacji przy obciążeniu

Wdrożyłem bardzo podstawową wymaganą walidację na "imię" w dużej mierze oparte na przykładzie sugerowanym na witrynie nokautowej (http://knockoutjs.com/documentation/extenders.html) - Przykład Live 2: Dodawanie sprawdzania poprawności do obserwowalnego.Sprawdzanie poprawności Knockout.js przy użyciu przedłużaczy - zapobieganie walidacji przy obciążeniu

Problem polega na tym, że nie chcę, aby sprawdzanie poprawności było uruchamiane po załadowaniu formularza. Poniżej jest mój kod

<!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);

Zobaczysz demo wydania Jestem stoi pod tym linkiem http://jsfiddle.net/tCP62/22/``

Należy pamiętać, że link JSFiddle że mam pod warunkiem demo pokazujący problem - pracuje w „Chrome” i nie działa w IE.

Proszę, możesz mi pomóc rozwiązać ten problem.

Pozdrawiam, Ankush

Źródło

2013-07-19 ankush.net

Wystarczy pozbyć się następujący wiersz i powinien robić to, co chcesz:

//initial validation 
validate(target());

required extender zostanie wywołana gdy strona ładuje się, a ponieważ zawiera powyższe wywołanie, powoduje natychmiastowe uruchomienie sprawdzania poprawności. Następny wiersz kodu target.subscribe(validate); zapewnia, że jest on wyzwalany, gdy obserwowalne wartości zmian (zgodnie z komentarzem). I to wszystko, czego potrzebujesz w tym przypadku.

Źródło

2013-07-19 10:15:43 Robbie

Dziękuję bardzo ... Po prostu nie widziałem tego w wielkim schemacie ... Spędziłem około 4 godzin wczoraj i 4 godziny przed wysłaniem do stosu przelewów. Ale hej, zrobiłeś mój dzień. Jeszcze raz dziękuję. –

Teraz mam inny problem. Chcę wywołać funkcję sprawdzania poprawności przy kliknięciu przycisku Zapisz, aby zaznaczyć elementy sterujące z błędem. W oparciu o powyższe, mógłbym wywołać "validate" przed zapisaniem i sprawdzić właściwość "hasError". Co jednak jeśli mam dwie walidacje na "firstName" - powiedz "wymagane", a także to firstName powinno zaczynać się od "A", dla którego istnieje inny extender. W tym scenariuszu czy muszę wymieniać metodę sprawdzania poprawności w inny sposób na każdym przedłużaczu i wywoływać wszystkie metody sprawdzania poprawności dla każdego obserwowalnego, który musi zostać sprawdzony? Wszelaka pomoc jest bardzo doceniana. –

Sprawdzanie poprawności Knockout.js przy użyciu przedłużaczy - zapobieganie walidacji przy obciążeniu

Odpowiedz

Powiązane problemy