Convalida Knockout.js tramite estensori - impedire la convalida sul carico

Ho implementato una convalida obbligatoria di base sul "nome" in gran parte basata sull'esempio suggerito sul sito web knockout (http://knockoutjs.com/documentation/extenders.html) - Esempio live 2: aggiunta di convalida a un osservabile.Convalida Knockout.js tramite estensori - impedire la convalida sul carico

Il mio problema è che non voglio che la convalida si attivi quando il modulo viene caricato per la prima volta. Qui di seguito è il mio codice

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

Vedrete la demo di problema che sto affrontando a questo link http://jsfiddle.net/tCP62/22/``

Si prega di notare che il link JSFiddle che ho fornito alla demo che mostra il problema - lavora a "Chrome" e non funziona in IE.

Per favore qualcuno può aiutarmi a risolvere questo.

saluti, Ankush

fonte

2013-07-19 ankush.net

Basta sbarazzarsi della seguente riga e si dovrebbe fare quello che vuoi:

//initial validation 
validate(target());

Il required extender viene chiamato quando la pagina carica, e perché contiene la sopra chiamata, provoca l'attivazione immediata della convalida. La riga successiva del codice target.subscribe(validate); assicura che venga attivata quando l'osservabile modifica il valore (come indicato dal commento). E questo è tutto ciò che serve in questo caso.

fonte

2013-07-19 10:15:43 Robbie

Grazie mille ... Non riuscivo a vederlo in un grande schema di cose ... Ho passato circa 4 ore ieri e 4 ore prima di postare per impilare. Ma hey, hai reso la mia giornata. Grazie ancora. –

Ora ho un altro problema. Voglio invocare la convalida sul pulsante di salvataggio per fare in modo che i controlli che hanno l'errore vengano evidenziati. Sulla base di quanto sopra, potrei invocare "validate" prima di salvare e verificare la proprietà "hasError". Tuttavia, cosa succede se ho due convalide su "firstName" - dico "required" così come quel firstName dovrebbe iniziare con "A" per cui esiste un altro extender. In questo scenario, devo denominare il metodo di convalida in modo diverso su ciascun extender e richiamare tutti i metodi di convalida per ogni osservabile che deve essere convalidato? Qualsiasi aiuto è molto apprezzato. –

Convalida Knockout.js tramite estensori - impedire la convalida sul carico

risposta

Problemi correlati