Realtime validation using Ajax
Posted by masuidrive Wed, 04 Jan 2006 21:45:00 GMT Ajaxなどを駆使して、入力値を動的にチェックするライブラリ、realtime validation を公開しました。 >> http://masuidrive.jp/validation 正規表現とメッセージを指定するだけで、入力した瞬間にユーザに対してガイドメッセージを表示させる事ができ、今までの様に画面遷移後にエラーが出て、ユーザがエラー位置を把握しづらいと言う事がありません。 これで、あなたのサイトも一気にWeb2.0！ なのに使い方は超簡単。 prototype.js とvalidate.js を自分のHTMLに読み込んで、下記の様に正規表現で表示するメッセージを指定するだけ。 Validator.register({ "#mail" : { "/^([^@\\s]+)@((?:
入力値を簡単に制限する「yav」とかフォーム入力チェックいろいろ
メール送信フォームやらアンケートの回答フォームやら、とにかくネット上には様々なフォームが存在しています。入力する値が間違っていると「エラー」表示を出すタイプのモノが多いですが、出される側から見れば「そんな値を入力できるようにするなよ！」「8文字までしか受け付けないんだったら、最初から入力可能な文字数を8文字に制限しておけよ！」「エラーが出たらどこを再入力すればいいのかわかりやすく表示してくれ！」などと思うこともしばしば。 というわけで、この「yav」は入力エラーチェックだけでなく、最初から入力できる値を制限したり、数字であれば範囲指定したり、入力チェック後にフォームの色を変えてわかりやすくしてくれたり、とにかくいろいろ便利な入力チェック機能を簡単に組み込むことができるオープンソースで開発されているJavaScriptファイルです。入力チェック後のエラー表示もポップアップウインドウやページ内
人力検索はてな - 入力フォームのデザインがすばらしいページを教えてください。 派手さや装飾ではなく、使いやすさ、見やすさなど機能美優先でお願いします。 海外のサイトでも結構で
入力フォームのデザインがすばらしいページを教えてください。 派手さや装飾ではなく、使いやすさ、見やすさなど機能美優先でお願いします。 海外のサイトでも結構です。
サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ:phpspot開発日誌
サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ 2007年06月04日- chris erwin dot com - CRIR: Checkbox Radio Input Replacement This will allow you to style the label however you wish using CSS, and the actual input control will be hidden. サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ。 ライブラリを使うことで、次のようなフォームを実現することが出来ます。 必要なCSSとライブラリを読み込んで、input に class をあてるぐらいの簡単な方法でフォームの変更が可能です。 CSSデザインなので画像を変更で自分好みのフォ
入力フィールドにカーソルを合わせた際に吹出しヒント表示するCSS＆JavaScriptサンプル:phpspot開発日誌
Form field hints with CSS and JavaScript (Ask the CSS Guy) My co-workers pointed out a nice effect on the Vox registration form. 入力フィールドにカーソルを合わせた際に吹出しヒント表示するCSS＆JavaScriptサンプル。 次のように、入力フォームにカーソルを合わせた時点でそのフィールドのヒントを表示できます。 フォームの入力フィールドの下に説明を書くよりも、ポップアップしてヒント表示したほうがユーザビリティ的によさそうですね。 要素の表示/非表示処理をJavaScriptによって行っていて、綺麗なHTMLによる実装が可能な点もいいです。 また、サンプルが1ファイル＋画像1枚とシンプルなので、あまりJavaScriptやCSSの知識のない方でも、ちょこっと変え
デフォルトのフォームをクールにカスタマイズする方法:phpspot開発日誌
maratz.com archive Fancy checkboxes and radio buttons Many young guns ask about how to style custom checkboxes and radio buttons in forms. I prepared a typical markup, a few lines of CSS and some JavaScript functions (Safari label behavior fix included). デフォルトのフォームをクールにカスタマイズする方法。 以前、「Niceformでエレガントなフォーム生成 」というので独自フォームにデザイン変更する方法をお伝えしましたが、どういう仕組みか気になっていました。 独自フォームデザインの実装方法について書かれているサイトを発見したので仕組みを説
選択中のINPUT要素をハイライトしてくれるJavascriptライブラリ「Highlight active input」:phpspot開発日誌
選択中のINPUT要素をハイライトしてくれるJavascriptライブラリ「Highlight active input」 2006年11月09日- Highlight active input This script is easy to configure. All you have to do is to define how the active input should be highlighted. This is done by CSS. Then you have to call a function at the bottom of your page to initialize the script. 選択中のINPUT要素をハイライトしてくれるJavascriptライブラリ「Highlight active input」。 実装方法は簡単で、次の通り。 1. CSSの
inputのtype=fileをCSSでクールにスタイルするサンプル:phpspot開発日誌
Styling File Inputs with CSS and the DOM // ShaunInman.com This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation. inputのtype=fileをCSSでクールにスタイルするサンプル input type=file なエレメントを次のように美しくスタイリングするサンプルが公開されています。 これはなかなかクールですね。Web2.0なサイトでは是非実装したいスタイルです。 関連エントリ サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ CSSでデザインされたテーブルレスでクールなフォームサ
クールなJavaScript入力補完ライブラリ「Ajax Auto Suggest v.2」:phpspot開発日誌
Ajax Auto Suggest v.2 : CSS . XHTML . Javascript . DOM : Brand Spanking New The new and improved version of my JavaScript/Ajax auto suggest script. More features, less bugs. Demo and documentation here.クールなJavaScript入力補完ライブラリ「Ajax Auto Suggest v.2」。 入力ボックス上でaを入力したところ。 JSON形式や補完時のコールバック関数、フェードエフェクト、ＣＳＳデザインなど基本的な機能は盛り込まれています。 ちょっと変わった補完ボックスを作りたい場合に使えそう。
web-sun.com is available for purchase - Sedo.com
The domain web-sun.com is for sale. The domain name (without content) is available for sale by its owner through Sedo's Domain Marketplace. Any offer you submit is binding for 7 days. All quoted prices are final prices. The domain web-sun.com is for sale. Make an offer on this domain You are not the highest bidder!
フォームに入力を促すメッセージを出力する JavaScript
■ フォームに入力を促すメッセージを出力する JavaScript input type="text" なフォームに最初から「ここに入力して下さい」みたいなメッセージを薄い色で表示させておいて入力を促すようなのありますよね。なんか、あれを、現実逃避気味に書いたので。 function inputDefault(elm, msg) { this.elm = elm; this.msg = msg; this.color = '#999999'; this.bgColor = '#F9FFF9'; } inputDefault.prototype.set = function() { this._cleared = false; this._defColor = this.elm.style.color; this._defBGColor = this.elm.style.background
標準のINPUTを拡張してフォーム入力を便利にする「inputEx」:phpspot開発日誌
inputEx Documentation - Examples 標準のINPUTを拡張してフォーム入力を便利にする「inputEx」。 input 入力の際に、数値Onlyや、Validate機能、色入力機能、オートコンプリートを提供して、フォーム入力をより便利にするものです。 色入力 メールアドレスバリデーション。ＵＲＬやパスワードなんかもあり 階層型のツリーデータを入力 うまく導入してフォームのユーザビリティに役立てたいですね。 関連エントリ JavaScript製のフォームバリデータライブラリいろいろ 超クールなカレンダー型日付入力補助用JSライブラリ
badboy.media.design :: articles :: Niceforms
This is where Lucian writes about design, coding, business, the web, and other stuff. Occasionally he also posts some of the photos he takes. Before Internet Explorer 7 and Windows Vista, web text on PCs looked significantly different than it did on Macs. That was because OS X has long employed an anti-aliasing engine, named Quartz, I believe, whereas Windows XP and all previous versions displayed
チェックボックスを画像にするライブラリ
CRIR: Checkbox & Radio Input Replacement This combination of JavaScript and CSS will hide checkbox and radio inputs that have a class = "crirHiddenJS", an id, and a proper label tag. This will allow you to style the label however you wish using CSS, and the actual input control will be hidden. The form will still collect data as it normally would because the label itself will trigger the hidden in
入力文字数の制限を可視化する JavaScript
■ 入力文字数の制限を可視化する JavaScript 好評の、読み込ませるだけシリーズ の8番目。 maxlength 属性とかアプリケーション側とかでフォームの入力文字数を制限していても、ユーザにとっては自分が何文字くらい入力したかがわからないと不便そうなので、汎用的なのを作りました。 フォームにフォーカスが当たると、入力した文字数と入力可能な文字数が表示され、リアルタイムに更新されていきます。 動作サンプル コードは次の通りでして、prototype.js(1.5.0くらい) に依存してます。 var VisualLength = Class.create(); VisualLength.prototype = { initialize: function(attribute) { this.fields = ['INPUT', 'TEXTAREA']; this.attribute
Styling File Inputs with CSS and the DOM // ShaunInman.com
The Last Rocket An 8-bit game for iPhone, iPad and iPod touch Minted of course. In partnership with File inputs (<input type="file" />) are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation. Bef
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]フォームのtextareaをサイズ変更できるスクリプト -TextArea Resizer
caramel*vanilla » フォームのユーザビリティ向上 - Tooltip for forms
クールなオンラインフォームをWEB上でジェネレートできる「pForm」:phpspot開発日誌