エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
イラっとしない超ミニマルなフォームバリデーションを素のJSで実装しよう
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
イラっとしない超ミニマルなフォームバリデーションを素のJSで実装しよう
フォーム送信前のバリデーション(検証)は欠かせませんが、あまりリッチな機能ではかえって使いにくく... フォーム送信前のバリデーション(検証)は欠かせませんが、あまりリッチな機能ではかえって使いにくくなることもあります。なるべくブラウザーの機能を使って、シンプルなバリデーション機能を実装する方法を解説します。 HTML5ではブラウザーベースのフォームバリデーションを実装するために、新しい属性がいくつか導入されました。たとえばpattern属性はtextarea要素やinputに対して有効な入力値を正規表現で定義し、required属性はフィールドが必須かどうか指定します。新しい属性が実装されていないレガシーなブラウザーでは、ポリフィルを実装するためのベースとして値を利用できます。これらの属性は、フォームの即時バリデーションを実現するなど、面白い機能強化に使えます。 バリデーションを厳しくしすぎると、ユーザーの自然なブラウジング動作を遮り、邪魔になってしまいます。たとえば、あるフィールドが不正