knockout.jsで入力チェック

このあいだ作ってみたknockout.jsを使ったTodoアプリなんですが、全く入力チェックをかけてないので、空文字でTodoが作れてしまうという問題がありました。

knockout.jsで入力チェックってどうやるのが普通なんだろうか、と思ってググってみたところKnockout-Validationというのがあったのでこれを使って簡単に必須チェックだけかけてみました。

Knockout-Validation
https://github.com/ericmbarnard/Knockout-Validation

モデルにルールを設定します。必須チェックをかけました。
他にもいろいろあるようです。
https://github.com/ericmbarnard/Knockout-Validation/wiki/Native-Rules

     function Todo(data){
-        this.title = ko.observable(data.title);
+        this.title = ko.observable(data.title).extend({required: true});
         this.finished = ko.observable(data.finished);
         this.resource_uri = data.resource_uri
     }

で、インスタンスにko.validatedObservableをかましてやればisValid()メソッドでルールを満たしているか判定してくれるようになりました。

            var todo =  ko.validatedObservable(new Todo({title: self.newTodoTitle()}));
            if(!todo.isValid()){
                return
            }

ソースはこちら

django-kickstrap-todo
https://github.com/yuhei0718/django-kickstrap-todo

動くサンプルはこちら

http://django-kickstrap-todo.herokuapp.com/