Come convalidare la casella di controllo in knockout

Question

Sto utilizzando plugin knockout.js e knockout.validation. Sto provando a convalidare la casella di controllo, se è selezionata rispetto alla sua valida altrimenti non valida. SO per questo ho creato un attributo valdation personalizzato in eliminazione diretta:

Example Fiddle

ko.validation.rule['checked'] = { 
    validator: function (value) { 
     if (!value) { 
      return false; 
     } 
     return true; 
    } 
}; 

E la mia vista del modello è:

function VM() 
{ 
    var self = this; 
    self.Approve = ko.observable(false).extend({ 
     checked: { message: 'Approval required' } 
    }); 
    self.Errors = ko.validation.group(self); 
    self.Validate = function(){ 
     if(self.Errors().length > 0) 
     self.Errors.showAllMessages(); 
    }; 
} 

Ma la convalida non funziona. Qualcuno può dirmi cosa sto facendo di sbagliato qui?

Answer 1

Ci sono alcuni problemi con il vostro approccio attuale:

1. Dovete perdere digitato il ko.validation.rule dovrebbe essere ko.validation.rules
2. La definizione di regole personalizzate e la chiamata del ko.validation.registerExtenders(); dovrebbe essere fatto prima di provare prima usare il validatore personalizzato.

3. Per la validazione visualizzata è necessario legarla da qualche parte con validationMessage vincolante:

   <span data-bind='validationMessage: Approve'></span> 
   

Così il copione fisso:

ko.validation.rules['checked'] = { 
    validator: function (value) { 
     console.log(value); 
     if (!value) { 
      return false; 
     } 
     return true; 
    } 
}; 

ko.validation.registerExtenders(); 

function VM() 
{ 
    var self = this; 
    self.Approve = ko.observable(false).extend({ 
    checked: { message: 'Approval required' } 
    }); 

    self.Errors = ko.validation.group(self); 

    self.Validate = function(){  
    if(self.Errors().length > 0) 
     self.Errors.showAllMessages(); 
    }; 
} 

ko.applyBindings(new VM()); 

E il codice HTML:

<input type="checkbox" data-bind="checked: Approve" /> 
<span data-bind='validationMessage: Approve'></span> 
<button type="button" data-bind="click: Validate">Submit</button> 

Puoi provarlo h ERE: Demo.

Answer 2

Si potrebbe anche usare il validatore nativa pari:

self.Approve = ko.observable(false).extend({ 
    equal: { params: true, message: 'check must be ticked' } 
    });