2016-03-18 13 views
6

Sto utilizzando il seguente plugin di convalida knockout: https://github.com/Knockout-Contrib/Knockout-ValidationKnockout Convalida: come convalidare i campi sul pulsante di scatto, non sul cambiamento di ingresso

voglio convalidare i miei campi, quando clicco sul pulsante "Invia", non ogni volta che cambio il valore dell'input. Come lo posso fare?

Javascript:

ko.validation.init({ 
    insertMessages:false, 
    messagesOnModified:false, 
    decorateElement: true, 
    errorElementClass: 'wrong-field' 
}, true); 

var viewModel = { 
    firstName: ko.observable().extend({minLength: 2, maxLength: 10}), 
    lastName: ko.observable().extend({required: true}), 
    age: ko.observable().extend({min: 1, max: 100}), 
    submit: function() { 
     if (viewModel.errors().length === 0) { 
      alert('Thank you.'); 
     } 
     else { 
      alert('Please check your submission.'); 
      viewModel.errors.showAllMessages(); 
     } 
    }, 
}; 

viewModel.errors = ko.validation.group(viewModel); 

ko.applyBindings(viewModel); 

HTML:

<fieldset>  
    <div class="row" data-bind="validationElement: firstName"> 
     <label>First name:</label> 
     <input type="text" data-bind="textInput: firstName"/> 
    </div> 

    <div class="row" data-bind="validationElement: lastName"> 
     <label>Last name:</label> 
     <input data-bind="value: lastName"/> 
    </div> 

    <div class="row"> 
     <div class="row"> 
      <label>Age:</label> 
      <input data-bind="value: age" required="required"/> 
     </div> 
    </div> 
</fieldset> 

<fieldset> 
    <button type="button" data-bind='click: submit'>Submit</button> 
    &nbsp; 
</fieldset> 

Questo è il mio jsfiddle: http://jsfiddle.net/xristo91/KHFn8/6464/

+2

tua jsfiddle sembra funzionare come specificato - ti penso mi manca un po 'richiesto: true' – Carsten

+0

Sfortunatamente questo non è abbastanza :(Voglio fare le mie convalide e associare la classe di errore su submit click, non su live change. –

+0

bene quindi basta spostare la logica all'interno del click-handler- funzione e farlo manualmente – Carsten

risposta

9

Beh, sì i validatori fanno licenziato quando il cambiamento osservabili. Ma ... puoi ingannare con l'unica opzione dei validatori. Ho fatto un Fiddler sample come potrebbe funzionare.

La domanda qui è più ... cosa vuoi fare dopo la prima volta che l'utente fa clic su ....

Fondamentalmente il campione mette una condizione onlyIf a tutti i validatori, e il validateNow osservabile , decide quando i validatori devono valutare ... in modo basilare come si voleva ... nel metodo submit.

self.validateNow = ko.observable(false); 

l'onlyIf viene valutato su tutti validatore:

self.firstName = ko.observable().extend({ 
minLength: { 
    message:"minlength", 
    params: 2, 
    onlyIf: function() { 
    return self.validateNow(); 
    } 
}, 

e l'validateNow ottiene solo impostare sulla presentare

self.submit = function() { 
self.validateNow(true); 

... ho anche un po 'rearenged solo i dati binding , perché il tuo campione mette solo il riquadro rosso attorno agli input.

Sono abituato a creare le mie chiusure con constructors..so il campione non è la stessa "architettura a" come la tua, ma penso che si undertsand che

+0

Grazie! Questa è una buona soluzione del mio problema. –

Problemi correlati