bl6.jpホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームJavaScriptHTML5のフォームバリデーションを実装できるjQueryプラグイン「h5Validate」JavaScript2017.07.28HTML5のフォームバリデーションを実装できるjQueryプラグイン「h5Validate」h5ValidateはHTML5によるフォームバリデーションを実装することができるjQueryプラグインです。すべての主要なブラウザで動作するのがいいですね。Eコマース用に開発されたとのこと。h5Validateh5Validateの実際のデモ動作は、下記のページから確認できます。デモデモページには、いくつかのサンプルが設置されています。Nameと書かれた場所にあるテキストボックスを空欄のままにして「Submit」ボタンを押すと、「このフィールドを入力してください。」というメッセージが表示されます。テキストボックスが空欄になっているか、もしくは文字が入力されているかを検証してくれます。Dateのテキストボックスでは、mm/dd/yyyyという形式が指定されています。この形式以外で入力してenterキーを押すと、「指定されている形式で入力してください。」というメッセージが表示されます。入力された文字が指定された形式になっているか否かを検証してくれるというわけです。このように、フォーム内に入力されたデータを検証して間違っている場合はメッセージも表示させることができるので、間違いを事前に防ぐことができます。これならユーザーにとっても安心してフォームに入力できますね。email、phone、url、number......など、いろんなパターンで活用できます。h5Validateにはオプションもいろいろ用意されています。主なオプションは、errorClass、validClass、errorAttribute、kbSelectors、focusout、focusin、change、keyup、clickです。9、8、7、6、Chrome、Firefox、Safari、Opera。7、Mac、iPhone、Androidでテスト済みとのこと。HTML5によるフォームバリデーションを実装したい人は、ぜひ「h5Validate」を活用されてみてはいかがでしょうか。h5Validateの詳しい使い方やダウンロードは、下記ページからどうぞ。関連記事JavaScript3Dキューブのように回転するカウントダウンタイマーを実装できる「countdownCube」countdownCubeは3Dキューブのようにクルッと回転するカウン...JavaScript拡張性の高い美しいツールチップを実装できる「Drooltip.js」Drooltip.jsは、美しくパワフルで拡張性の高いツールチップを実...JavaScript指定したテキストをハイライトとタイピング効果で表示できる「typeLighter.js」typeLighter.jsは、指定したテキストをハイライトとタイピン...JavaScriptスクロールしてもついてくるスティッキー実装「stickUp2」stickUp2はスクロールしてもついてくるシンプルなスティッキーを実...JavaScriptイベントやカスタマイズが可能な拡張性の高いタブシステム「Touch-Tabs-jQuery」Touch-Tabs-jQueryは、イベント設定やカスタマイズが可能...JavaScriptレスポンシブなLightbox風のギャラリーを実装できるjQueryプラグイン「anoFlow」anoFlowというjQueryプラグインを使えば、レスポンシブなLi...検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。フレール」という紅茶の専門店があり、...2020.01.27逆さでも使えるサンワのLEDつき充電式電動エアダス...サンワサプライからガス不使用で環境にやさしい充電式電動エアダスター「CD-ADE...2020.01.24銀座の無印で朝食→大人のジャムパン(月と花)→松濤...この日のスタートは銀座から。WAIT...昨日の東急プラザの続き。一日中渋谷で遊んでいたらすっかり夜になってしまった。