2024年版 HTMLで作るフォームバリデーション - ICS MEDIA
すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を
アクセシビリティを考慮したHTMLコーディングガイド
これ何なの？ もともと私が社内メンバー向けに書いていたドキュメントで、 UIパーツ毎のアクセシビリティを考慮したHTMLコーディングTips集です。 社内のドキュメント置き場に眠っていたものですが、知見として社外にも共有出来る内容だなと思ったのと、アクセシビリティをこれからやっていこう！という方の参考になればと思い共有させて頂きます。 ※そもそもアクセシビリティって何なの？という方は、ウェブアクセシビリティ基盤委員会のサイトを見てみてください🔍 目次 おすすめVSCode拡張機能 🕹ボタン 📷 画像 🔍 ナビゲーション 💻 フォーム おすすめVSCode拡張機能 axe Accessibility Linter をインストールしておくとimgタグのalt忘れなど警告が表示されるので、アクセシブルでない書き方を未然に防げるので便利です！ 🕹ボタン buttun タグを使いましょう
お問い合わせフォームのウェブアクセシビリティー対応の方法 - ICS MEDIA
フォームはウェブサイトの中でもインタラクションの多い箇所です。ユーザー側にきちんと情報を伝え、そして正しく入力してもらう必要があるのでアクセシビリティーには気をつけたいです。アクセシビリティー対応といえばWAI-ARIAによる支援がありますが、この記事ではWAI-ARIAに限らずどう対応するべきなのか、デモを用いて紹介します。 バリデーションに関してシンプルに実現できるものと、ちょっと凝ったリアルタイムバリデーションのものと2例用意しています。後者は動的に変化するコンテンツへのアクセシビリティー対応について解説しています。 サンプルを別ウィンドウで開く（シンプル版） サンプルを別ウィンドウで開く（リアルタイム版） コードを確認する ▼シンプルなバリデーション ▼ちょっと凝ったバリデーション まずはセマンティックなマークアップを WAI-ARIAを使ったコーディングというと、とにかくrole
Next.jsを勉強してみる その③ 〜入力チェック（バリデーション）編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今回は今まで構築した環境を使って、入力チェック（バリデーション）部分を手探りのままに作ってみたいと思います。 バリデーション処理をするためライブラリを探してみたところ、simple-react-validatorというなんとも組み込みやすそうなライブラリがありました。名前の通りsimpleであることに期待し、このライブラリを使ってチェック処理を実装したいと思います。 では、さっそく。 バリデーションに必要なものをインストール まず、simple-react-validatorを使用するため、nodeのルートディレクトリ(app)ターミナルで以下コマンドを実行します。 # simple-react-validatorをインストール # Next.jsのプロジェクトルートで実行すること npm install simple-react-validator --save login.tsxファイ
Vue.jsを使用してさまざまなフォームを簡単に実装できる -Vue Formulate
Vue.jsを使用して、Webページやスマホアプリでよく使用されるフォームを簡単に実装できるVue Formulateを紹介します。 サインアップ、ログイン、メールアドレス、ファイルのアップロード、アンケートなど、さまざまなフォームをサポートしており、バリデーション機能も備えています。 Vue Formulate Vue Formulate -GitHub Vue Formulateの特徴 Vue Formulateのデモ Vue Formulateの使い方 Vue Formulateの特徴 Vue Formulateは、Vue.jsを使用してフォームを構築する最も簡単な方法です。主な機能は、フォームとフィールドの検証、ファイルのアップロード、フォームの生成、ラベルをサポートする単一要素の入力、ヘルプテキスト、エラーメッセージ、プレースホルダーなど、さまざまなプロジェクトで使用するための包
Visual Studio Code (PHPStrom) で WordPress開発環境を作る - toiee Lab
個人データは、このウェブサイトでの体験のサポート、アカウントへのアクセスの管理、プライバシーポリシー に説明されている他の用途に使用されます。 ITサポート Visual Studio Code (PHPStrom) で WordPress開発環境を作るvscode + phpcs + wpcs 概要 Visual Studio Codeを用意する（あるいは、PHPStorm）PHP関連の拡張機能をインストールphpcs (コード規約チェック）をインストール by homebrewwpcs (WordPress）をインストール by composer 前提 homebrew というパッケージ管理ソフトを入れておくcomposer というPHP専用のパッケージ管理ソフトを入れておく (1) Visual Studio Code とても便利なエディタ。情報も非常に多い。インストール情報を探して
macOSのVisual Studio CodeでPHP CodeSniffer & WordPressコーディング規約によるコードチェック環境を構築
当サイトでは、WordPress標準や配布されているテーマは使用せず自作しています。 一応、WordPressのテーマチェック機能を使い使用していない機能を除いて問題がないかチェックはしていますが、正直ちゃんと出来ているのかまだまだ不安な部分があったりします。 先日、いつも「信州 WordPress Meetup」でお世話になっているとろゆに（@Toro_Unit）さんから「PHP CodeSnifferとかでコーディング規約のチェックしてみると良い」とアドバイスいただいたので早速WordPressコーディング規約を含めてインストールしましたが、Visual Studio Codeとの連携でちょっとつまずいたので環境構築手順を備忘録的にまとめてみました。 PHP CodeSnifferとは PHPのコーディング規約チェックをしてくれるツールです。 Homebrew & Composerのイ
Webディレクターも覚えておきたい！「正規表現」を紹介します | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、Webディレクターのともぞうです。 突然ですが、今回の記事は正規表現についてお話ししたいと思います。 正規表現とは もしかしたら「正規表現ってなに？」という方もいらっしゃるかもしれません。まずは辞書的な意味からご紹介しましょう。 正規表現 文字のパターンを表現する方法のひとつ。特定の文字（メタキャラクター）を使って、汎用的に文字列のパターンを表現し、文字列の置換、検索などに使用する。たとえば、「.」は任意の文字を表し、「*」は前の文字の繰り返し、「^」は行頭、「:」は行末を示す、などさまざまな表現方法がある。これらを使うことで、「数字ではじまり、ひらがなを含む行」や「行末が（。）で終わらない行」といった複雑な文字列のパターンを表現できる。文字検索の「grep」や置換の「sed」、高度なテキスト処理が可能な「AWK」や「Perl」など、正規表現はUNIX関連のテキスト処理コマンド
Vue.jsで実装された、サーバーサイドのバリデーションを自動表示するフォームのコンポーネント -FormVuelar
サーバーサイドのバリデーションを自動的に表示するようにVue.jsで実装されたフォームのコンポーネントを紹介します。 ベーシックなフォームをはじめ、ファイルアップロード、ドロップゾーンなど、最近よく利用されるフォームのコンポーネントが揃っています。
便利なのが登場！フォームのバリデーションをシンプルな記述で実装できる超軽量JavaScriptライブラリ -v8n | コリス
Webサイトやスマホアプリのどの部分にでもフォームに入力された値を検証するバリデーションを簡単に実装できる、わずか2.29kBの超軽量ライブラリを紹介します。 バリデーションでよく使用されるルールもデフォルトで30個以上用意されており、ルールをカスタマイズして利用するのも簡単です。 v8n -GitHub v8nの特徴 v8nのドキュメント v8nの使い方 v8nの特徴 v8nの名称は、「validation」の「v」と「n」の間に正確に8文字あるという意味です。 流暢でチェーン化可能なAPI チェーン化可能なAPIを使用して、フォームの検証を簡単に作成できます。 有用な標準検証ルール フォームの検証でよく使用される30個以上のルールが用意されています。 カスタマイズ性 フォームの検証用ルールは、簡単にカスタマイズできます。 非同期検証をサポート バックエンドでの検証のように時間のかかるル
CSSスニペット：CSSでinputに入力したらlabelのスタイルが変更されるようにする | かちびと.net
Result :placeholder-shown疑似クラスを使ってlabelのスタイルを入力の有無でスイッチします css.input-label { color: blue; } .input :not(*):placeholder-shown, .input-label {/*入力されたとき*/ color: green; } .input-control:placeholder-shown ~ .input-label {/*入力されてないとき*/ color: red; }html<div class="input"> <input class="input-control" id="input" placeholder="hogehoge" /> <label class="input-label" for="input">入力すると色が変わります</label> </div>
なるべく強固なパスワードを入力して貰う為のフォームのサンプル
Better Password Form Codepenでパスワード設定の際のフォームで、より強固なパスワードをユーザーに入力してもらうよう促すUIが参考になったので備忘録。一定の条件を満たしたパスワードで設定完了ステップに進めるようにする、というもの。サンプルでは一定の文字数以上であり且つ、大文字、小文字、記号を含めたパスワードでないと次のステップに進めないようにしてあり、画面遷移後は入力したパスワードを再入力して設定完了プロセスが終了します。パスワードは強いものを期待出来るかもしれませんね。 現在でも同じプロセスは既に存在しますが、分かりやすくする事である程度ストレスを軽減できる気がします。とはいえ、それでもやはり面倒な入力フォームはユーザーにとってはストレスとなりやすいですね。認証システムは今後も進化していく事を求められているでしょうし、既に顔認証や指紋認証なども導入され始めているの
Multi-Step-Form-Js - フォームをマルチステップに変換 MOONGIFT
入力フォームが長かった場合、幾つかのステップに分割することがあります。そうした時、都度サーバに飛ばす方式が選ばれることが多いですが、その度にデータの送信とレンダリングが行われて面倒です。 そこで使ってみたいのがMulti-Step-Form-Jsです。jQueryでフォームをマルチステップに変換してくれます。 Multi-Step-Form-Jsの使い方 デモの場合、3ステップになっています。 バリデーション機能もあります。 二番目のステップに進みました。 最後のステップになっています。 Multi-Step-Form-Jsは一つのフォームを複数のステップに変換しています。つまりサーバ側に送られるのは一度だけです。確認画面がないのが残念ですが、その部分はカスタマイズしても良さそうです。 Multi-Step-Form-JsはjQuery/JavaScript製のオープンソース・ソフトウェア
Code Quality Checker - プログラムコードの品質チェッカー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました コードの品質はどう判断したら良いでしょうか。幾つかの判断基準はあると思いますが、複雑さやコードの重複などは挙げられるでしょう。そうしたネガティブな要素が積み重なった結果、バグを含みやすくなると言うことはあると言えます。 今回紹介するCode Quality Checkerはコードの品質チェックを行ってくれるソフトウェアです。 Code Quality Checkerの使い方 Code Quality Checkerはファイルのリストを渡すだけで実行できます。とあるJavaScriptプロジェクトの例。 $ cqc src/**/*.js Number of files: 3 Source lines of code: 203 Duplicate rate: 0.00% High c
Best JSON Formatter and JSON Validator: Online JSON Formatter
Ad blocking? It's okay. Please share to support us: JSON Formatter and JSON Validator help to auto format JSON and validate your JSON text. It also provides a tree view that helps to navigate your formatted JSON data. It helps to validate JSON online with Error Messages. It's the only JSON tool that shows the image on hover on Image URL in a tree view. It's also a JSON Beautifier that supports ind
Hyperform - Webフォームの入力チェックライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webフォームにおける入力検証の仕組みは大事です。一度サーバに送信してからエラーを返す方式はユーザのストレスも大きくお勧めしません。サーバ側での入力チェックは必要ですが、ユーザビリティのためにWebブラウザ側でも入力チェックをしましょう。 今回はそんな入力チェックを提供するJavaScriptライブラリ、Hyperformを紹介します。 Hyperformの使い方 利用例です。エラーメッセージをテキストボックスの下に表示します。 パスワードのように二つの入力欄に応じたケースもサポートしています。 チェックボックスが有効な場合だけ入力チェックが行われます。 URLやメールアドレス、時間などのフォーマットに合わせた入力チェックもできます。 エラーメッセージはフォームの上に出すこともでき
「メールアドレスのルール」系まとめがそろって間違ってるのでご注意を - 若くない何かの悩み
メールアドレスのルールのまとめ系のサイトの内容が間違っています。 なので、この類のまとめは安易に信じないように 、という注意喚起をしておきます。 追記（2013/11/27） twitterやはてブをみていたところ、「ユーザーへの啓蒙という観点ではまとめの内容間違ってない」というご意見をたくさんいただきましたので、補足をしておきますね。 どうも「ルール」と「トラブルを避けるためのガイドライン」が混同されているように思います。まとめで紹介されている内容がユーザ向けの「ガイドライン」なのであれば、「+ 記号使わせてよ」ぐらいしか文句はありません。 ですが、ほとんどのまとめは上記の内容を「ルール」として説明しています。ひどいものにはRFCに基づいてまとめを書いたようにミスリードさせる記事もありました。このような現状を憂い、このような記事を書いたのです。 そもそもこれに気づいた発端は@kusano
フォームバリデーションを楽にするライブラリを車輪の再発明してみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのいなばです。 去年はひたすらAngularJSをやっていましたが、今年はAngular2への乗り換えのためにいろいろと苦労しています。Angular2づくしの1年になりそうです。そして、去年の暮れからbabel教からTypeScript教へと改宗ました。 まだジェネリクスなどをあまり理解していない部分もありますが、TypeScriptの練習がてら、よくあるお問い合わせフォームのバリデーションライブラリを実装してみました。 リポジトリはこちら。 https://github.com/i78s/ValidateJS 対応ブラウザはモダンブラウザ（IEは10以上）、モバイルも対応しているつもりです。（なにか不具合があれば、issueを立ててもらえるとありがたいです） jQueryのバリデーションプラグインなどではデザインによっては仕様が合わず、使いずらいこと
mdast-lint - Markdown記法チェッカー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました MarkdownはHTMLを知らなくとも手軽に書ける記法ですが、見た目とHTMLとしての結果がリンクしていないのでレンダリングした結果、思っていたのと違ったということも少なくありません。 そこで使ってみたいのがmdast-lintです。記法上のミスやMarkdownで記述するためのより良い書き方が確認できるはずです。 mdast-lintの使い方 mdast-lintはnpmを使ってインストールができます。クライアントサイドのJavaScriptにも対応しているのでBowerでもインストールできます。 $ npm install -g mdast-lint 使い方としては -u で mdast-lint を指定し、ファイル名を指定します。 $ mdast -u mdast-lint
RedPen – 文章全体のエラーチェッカー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 文章を書くのが苦手という方は多いのではないでしょうか。個人的にはさすがに毎日のように文章を書いていて苦手意識はないのですが、堅苦しく書くなど文体によっては苦手な形式もあります。何より英文は苦手です。 通常、文章に対するスペルチェッカーはありますが、RedPenは自然言語で入力された文章全体のチェックをしてくれるソフトウェアです。 RedPenの使い方 RedPenのデモです。同じ単語が使われている場合、スペルミスなど様々な観点からチェックを行ってくれます。 RedPenは設定ファイルを使ってエラーチェックを行います。さらに言語非依存で、英語はもちろん日本語やドイツ語、中国語などでも利用が可能です。面白いのはプレインテキストだけでなく、MarkdownやTextileでもそのまま記述
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
