2013-02-19 19 views
8

Używam wtyczek knockout.js i knockout.validation. Próbuję sprawdzić pole wyboru, jeśli jest zaznaczone, a nieważne, czy jest prawidłowe. Więc dla tego stworzyłem niestandardowy atrybut valdation nokautem:Jak sprawdzić poprawność pola wyboru w nokaucie

Example Fiddle

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

I moim zdaniem model jest:

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(); 
    }; 
} 

Ale walidacja nie działa. Czy ktoś może mi powiedzieć, co robię źle?

Odpowiedz

8

Istnieje kilka problemów z aktualnym podejściem:

  1. Musisz tęsknić wpisany ko.validation.rule powinno być ko.validation.rules
  2. Definicja zwyczaj reguła i powołaniu ko.validation.registerExtenders(); należy zrobić przed pierwszym razem używać niestandardowego weryfikatora.
  3. W celu walidacji wyświetlane trzeba powiązać go gdzieś z validationMessage oprawa:

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

Tak ustalony scenariusz:

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

I HTML:

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

Możesz wypróbować na h ere: Demo.

3

Można również skorzystać z równą natywną walidator:

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