You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
hifiveでバリデーションの処理を行うとValidationResultが返ってきます。このオブジェクトでバリデーションが成功したか否か、さらに失敗だった場合にその原因を見つけることができます。 今回はValidationResultについて紹介します。 ValidationResultのプロパティ invalidCount 数値。バリデーションに引っかかった入力項目の数 invalidProperties 配列。バリデーションに引っかかった項目名。 invalidReason オブジェクト。バリデーションエラーの原因。 isAllValid 真偽値。すべての項目がバリデーション通過したか否か。 isAsync 真偽値。同期処理か否か。 isValid 真偽値。入力値に問題がないか否か。 properties 配列。すべての入力項目名。バリデーションの設定に関係しません。 validCo
hifiveのバリデーションライブラリ、FormControllerでは表示設定についてプラグインで設定を行います。現在、次のプラグインを提供しています。 composition フォーム全体に対してバリデーションを行い、失敗したすべての項目について指定した箇所にメッセージを表示します。 実際の動作はこちらのデモにて確認できます。バリデーションはボタンを押したタイミングでのみ行われます。 style フォーカスが当たった瞬間に個別の項目に対してバリデーションが実行されます。インプットを赤くしたりするのに使えます。 実際の動作はこちらのデモにて確認できます。 bsBalloon BootstrapのTooltipを使ったツールチップ表示です。BootstrapのJavaScriptライブラリが必須です。 実際の動作はこちらのデモで確認できます。 message バリデーションがエラーになった
HTML5では多くのAPIが追加されていますが、HTMLにおいてもタグや要素が追加されています。今回はその一つ、Aタグに追加されたping属性についてです。 ping属性は以下のように設定します。 To Google これでAタグをクリックすると http://www.google.co.jp へ遷移するのですが、その際同時に example.com へも POSTメソッドを呼び出します。これがpingということです。 利点 利点としては、 JavaScriptを書かないで実行できる JavaScriptがオフでも実行できる 外部URLへの遷移でもトラッキングできる などが考えられます。特にブロック系の機能を入れたとしてもトラッキングできるのが利点と言えるかも知れません。 対応ブラウザ 対応ブラウザとしてはHTML a ping Attributeによると、IE/Operaを除く主要ブラウ
hifiveの入力値チェック(バリデーション)機能であるFormControllerはHTMLタグに設定するだけで入力値チェック機能を追加できます。必須や数値の桁数チェックなどは簡単に行えますが、ワークフローによってはより複雑なフローが求められることでしょう。 そこで今回はより複雑な入力値チェックを実現する方法について紹介します。 1. 正規表現でチェックする 正規表現を用いることでより複雑なパターンによる入力値チェックが可能になります。これはHTML側で指定できます。例えば電話番号(国内限定)の場合は次のように設定できます。 This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, ope
ユーザの入力値を検証するのはWebアプリケーションを開発する上で大事な機能です。従来はユーザの入力をサーバサイドで検証し、入力エラーがあれば再度フォームをエラーメッセージとともに表示するのが一般的でした。しかしこの場合、レンダリングにかかる時間であったり、入力を再現するのが面倒(特にファイル送信など)でした。 そこで最近ではJavaScriptを使った入力チェック(バリデーション)が使われるようになっています。もちろんサーバサイドでの入力チェックはこれまで通り必要ですが、まずJavaScript側でチェックをすることで、ユーザストレスを軽減したUXが提供できるようになります。 そこで今回はhifiveの提供する入力値検証ライブラリ、FormControllerの使い方を紹介します。 ベースとなるコントローラ まず元になるコントローラのコードを紹介します。 .confirmをクリックすると入
hifive 1.2では入力値の検証(バリデーション)機能が追加されました。これはHTMLタグのdata-*要素に設定する入力値の検証機能です。今回はそのタグに設定する要素について紹介します。 設定パターンは13個 現在の検証として設定できるパターンは13個となっています。例えば requiredであれば、 data-required という指定を行います。 required 入力値の必須チェックです。null/undefined/空文字が検出できます。 <input data-required /> assertNull 入力値がnullまたはundefinedであることをチェックします。何かデータが入っているとエラーになります。 <input data-assertNull /> assertNotNull 入力値がnullまたはundefinedでないことをチェックします。ラジオボタ
Pitaliumを使うとスクリーンショットベースのテストができます。そしてもしエラーが発生した際にはPitalium Explorerを使って正解時の画像と、失敗時の画像を比べることができます。 今回はその画像の比較方法を紹介します。 Quick flipping 前後の画像を切り替えて表示します。同じ場所を切り替えるので、ちょっとした変化に気付くことができるでしょう。上部の「Expected」「Actual」のタブをクリックすることで、表示する画像を切り替えられます。 2-up 二つの画像を左右に並べて比較します。高さにずれがあったりする場合は、2-upが気付きやすいでしょう。 Swipe 二つの画像を重ねて表示し、スライダーを使って左右を切り替えます。前後のコンテンツで水平方向の差異があった時に便利です。 Onion skin スライダーで徐々に画像を切り替えます。透明度を差し替えてい
JavaScriptはシングルスレッドで動作するので、ネットワーク処理などが非同期で行われるようになっています。そうしないとAjaxを使っている間、何も入力や画面スクロールなども受け付けなくなります。 しかし非同期実行のしわ寄せとして、コールバックが多くなってネストが深くなったり、Promiseでも処理が分かりづらくなります。例えば非同期処理を伴ったループ処理を書こうとすると、次のようになります。 loop([1, 2, 3, 4, 5, 6], function(key, value, promise) { value = value * 2; promise.resolve(value); }).then(function(results) { console.log(results); }) function loop(ary, call) { var results = {}; r
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く