Backbone.js

Backbone.js0.9.10以降のクライアントサイドでのvalidate

投稿日:

参照

backbonejs.org/#Model-validate

stackoverflow.com/questions/14426155/backbone-validate-does-not-work

 

以前の情報 基本的なことが日本語でわかるので

Backbone.js入門 「Model」

 

Model

バリデーション(検証)はModelのvalidateメソッドをオーバーライドして設定する

validateが何かの値を返せば、違反ということになる

違反となると、モデルに対して”invalid”イベントが発行され、インスタンスにvalidationErrorプロパティがセットされる

View

validationErrorをとってもいいけど、invalidイベントを取るとこんな感じ

 

コンソールにはこんな感じでとれる 第2引数に返り値がはいるみたい

 

例えば、こんな実装

Model

返り値をハッシュにして

template

フィールドの横にメッセージエリアを準備しておいて

View

アクションのたびにメッセージをクリアにする

 

setのときvalidateでボタンを押さなくてもバリデーション実行(未完)

saveのタイミングにvalidateメソッドが実行されるけど、setメソッドでもvalidate:trueオプションをつければ、validateが実行される

 

つまり、backbone_datalink.jsをちょっと改造して

としてやれば、フォームの値を変えたとき(たぶんblurして値が変わっていれば)バリデーションが実行されてメッセージが出る

 

ただ、やっぱりこのままだとメッセージが出っぱなしなんで

こんな感じでイベントを設定すれば、メッセージも消える

*ただ、これでもバグがあって

最初のフィールドを入力して、次のフィールドに行くとき、バリデーションが実行されて、まだ入力してないのにエラーメッセージが出てきてむかつくことになる

あと、エラーメッセージが一度に1つしかでない(このへんはvalidateの返り値を変えてやればなんとかなりそう)

いまは考えたくないので、ボタンを押したらバリデーションで満足しておく

たぶん、invalidイベントをやめて、フィールドからchangeかblurするごとにvalidateしてメッセージを取得する

そして、ボタンを押したら全部をバリデーションとかしたらいいんじゃないかという走り書き

-Backbone.js
-

執筆者:

関連記事

backbone-relationalで関連するコレクションをRails3.2のAPIに投稿〜accepts_nested_attributes_for

By: Mike Baird – CC BY 2.0   backbonerelational.org/ Backbone-relationalを使って関連するコレクションをまと …

Underscore.jsのリファレンスなどのリンクメモ

By: Anne-Lise Heinrichs – CC BY 2.0 Underscore.jsは便利な関数ライブラリ. Backbone.jsが依存している.一部でアンスコと呼ばれてい …

Backbone.jsでViewのrender前後にコールバック処理を追加する

By: Michael Gil – CC BY 2.0 afterRender() callback in Backbone.js Views [crayon-58fe6583cc0357 …

Backbone.jsからjQuery UIのDialogを使う例

Backbone.js楽しくなってきた 部品ごとのクラスをつくって、それに飾りとイベントをつけて、あとは上位部品から呼び出してくっつけるだけ jQuery UIのダイアログの場合は、公式のサンプルだと …

Backbone.jsで関連するモデルのREADとCREATE

By: woodleywonderworks – CC BY 2.0   ThoughtBotの本を読み進めてるけど私には買ってよかったと感じている ゾンビviewのワナを回避す …