[B! jQuery][form] kobayashi_shinjiのブックマーク

どんなフォームにも使えるjQueryのフォームバリデーション exValidation :: 5509

jquery.validation.jsというフォームバリデーションプラグインを公開していますが、使える場面が割と限定されてしまうような作りだったので、より幅広く使えるようにexValidationという名前で新しいjQueryプラグインとして作り直しました。伴って仕様や使い方が異なる部分も多いので、ドキュメントとして書いておきます。ただし前半のバリデーションルール周りは同じエンジンを使ってるので、ほぼ同じです。ちなみにすごい長いです。。ルールを割り当てる際のclass名がhogeからchkhogeに代わりました。アップデートして使う場合は注意してください。サンプル1: エラーを右上に表示サンプル2: エラーを下に表示トピックスダウンロード使い方 1. JSファイルを読み込む 2. 基本バリデーションルール 3. select, checkbox、radio、複数項目の場合 4

kobayashi_shinji 2010/08/10

リンク

EFO(エントリーフォームの最適化)のまとめ | ユージック

EFO(エントリーフォームの最適化)のまとめ 2009年8月7日フォームのユーザービリティーの改善がコンバージョンレートの向上に一役買っているようです。 WEBサイトの最終的な受け皿であるお問い合わせフォームやショッピングカートといったフォームは他のコンテンツに比べて制作の際にないがしろにされがちですが、アクセス解析を見るとサイト内でもかなり上位の閲覧数のあるページとなります。コンテンツできっちり情報を伝えて、アクションをおこしてもらってもフォームの操作性ひとつで機会損失につながることだってあります。そこで最近ではEFO(エントリーフォームの最適化)としてフォームの改善対策が注目をあびています。致命的な改善すべき項目 1.入力の訂正をする際に以前に入力した内容が消えないようにするせっかく入力したのに書き直しやエラー訂正の時に入力した内容が消えているとモチベーションがいっきに落ちる

kobayashi_shinji 2009/08/17

リンク

jQueryプラグイン: Highlight Search Terms

前回のエントリで取り上げたスクリプトをjQueryプラグイン化した。だけ。GitHubにリポジトリを作って公開しておいた。基本的にはこれでもう良いやとか思ってるんだけど、URLパターンはもうちょっと何とかならないかなとかは思ってる。あとマルチカラーなハイライトを実現できるようにはしたいかも。実装はhighlight-1とかクラス名を順に振っていくだけとか簡単そうなものになると思う(そこまで考えてるなら実装しろ)。使い方は多くのjQueryプラグインと同じで、 $("body").highlightSearchTerms(); と検索語のハイライトを行いたい要素からつなげて使う。プラグイン側でインライン・スタイルを付加したりはしないので、デフォルトのem.highlightに対してスタイル指定をあらかじめしておく必要がある。 highlightSearchTerms()にはオプションとして

kobayashi_shinji 2009/06/04

リンク

フォーカスを当てるとデフォルト文字列が消えるinput text (jQuery編) (2009-05-16)

いろんな文献を気軽に参照しにくい環境になり、いちいち検索しなくてもいいようにここにまとめておきたい感じになったのでしばらくそんな普段書かないようなPOSTばかりします。まず、最近良くある、デフォルトの状態では入力例を表示して、フォーカスを合わせると消えるというインプットボックスの実装例について。このブログのコメント入力フォームがまさにそんな感じ。 <form action="hoge.php" method="get"> <p><input type="text" name="q" id="q" size="30" value="検索語を入力してください"><input type="submit" value="検索"></p> </form> $(function(){ $("#q").focus(function() { if($(this).val() == $(this).att

kobayashi_shinji 2009/05/18

リンク

selectボックスをシンプルなプルダウンに拡張するjQuery.selectable.js :: 5509

kobayashi_shinji 2009/04/14

リンク

リアルタイムフォームバリデーション jQuery.validation.js :: 5509

kobayashi_shinji 2009/04/14

jQuery
form

リンク

jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法:phpspot開発日誌

Justify elements using jQuery and CSS jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法が紹介されております。何ができるか？というのは次の図を見て頂くのがはやいでしょう。ビフォア ↓↓↓↓ アフターこれを実現するために、CSSとマークアップによって実現するのが普通ですが、jQueryによってもっとスマートに出来るようですね。具体的には、次のように、label の中で width がもっとも大きいもののサイズを得て、そのサイズにJavaScriptで調整しちゃうというものです。 $(document).ready(function() { var max = 0; $("label").each(function(){ if ($(this).width() > max) max = $(this).width(); });