イラっとしない超ミニマルなフォームバリデーションを素のJSで実装しよう
フォーム送信前のバリデーション（検証）は欠かせませんが、あまりリッチな機能ではかえって使いにくくなることもあります。なるべくブラウザーの機能を使って、シンプルなバリデーション機能を実装する方法を解説します。 HTML5ではブラウザーベースのフォームバリデーションを実装するために、新しい属性がいくつか導入されました。たとえばpattern属性はtextarea要素やinputに対して有効な入力値を正規表現で定義し、required属性はフィールドが必須かどうか指定します。新しい属性が実装されていないレガシーなブラウザーでは、ポリフィルを実装するためのベースとして値を利用できます。これらの属性は、フォームの即時バリデーションを実現するなど、面白い機能強化に使えます。 バリデーションを厳しくしすぎると、ユーザーの自然なブラウジング動作を遮り、邪魔になってしまいます。たとえば、あるフィールドが不正
HTML 5.1で追加されたHTMLフォームの検証メソッドとPromise関連の新機能
HTML 5.1で追加されたHTMLフォームの検証メソッドとPromise関連の新機能：特集：HTML 5.1概説（1/3 ページ） HTML 5.1で追加された新機能のうち、フォームの検証に使用できるreportValidityメソッドと、Promiseオブジェクトに関連した新機能を紹介する。 連載目次 HTML 5.1で追加された新機能の中から、本稿ではフォームの検証に使用できるreportValidityメソッドと、Promise関連の新機能を見ていくことにしよう。なお、本稿では「HTML 5.1」のようにマイナーバージョンを含むHTMLの表記には「HTML」とバージョンの間に半角スペースを挟むことにする。 HTMLInputElement.reportValidityメソッド 最初に「HTML 5.1 Implementation report」ページに記載されている「report
セレクトメニューの多用はNG！Webフォームの離脱を防ぐためには
新規会員登録などのフォーム入力の途中でユーザーが離脱してしまうことがあります。 サービスに興味のある熱心なユーザーだとしても、フォームを最後まで入力する前に離脱してしまうことも少なくありません。 セレクトメニューがユーザーを離脱させる よくある理由の１つとして、フォームに複数のセレクトメニューがあることが挙げられます。セレクトメニューのあるフォームでは、ユーザーが離脱しやすいことが調査によってわかっています。 これは、セレクトメニューを選択することが、ユーザーに多くの時間と労力をかけさせるからです。 では、セレクトメニューはどのようにユーザーの離脱を促してしまうのでしょうか？ フォーム入力のフローを阻害する ほとんどのフォームは、ユーザーが文字を入力するテキストフィールドから始まります。しかし、セレクトメニューが表示されると、ユーザーは選択肢を選ぶためにキーボードからマウスへと手を移動させ
HTMLのpattern属性とJavaScript正規表現のunicodeオプション - Hatena Developer Blog
こんにちは、Webアプリケーションエンジニアのid:nanto_viです。みなさんHTMLのフォーム検証機能は使っていますか? 近年は各Webブラウザの対応も進み、お手軽にフォームの利便性を高められるようになっています。 そんなフォーム検証機能のひとつがinput要素のpattern属性です。pattern属性の値にJavaScriptの正規表現パターンを指定することで、ユーザーの入力が意図しないものであった場合、フォーム送信ができなくなります。下図は5桁の数字の入力が求められるところに3桁しか入力せずフォーム送信しようとしたところです。ブラウザに組み込みのエラー表示が出現し、またそのメッセージにtitle属性の値が使われていることを確認できるでしょう。(pattern属性を指定する際には、title属性に書式の説明を記述することが推奨されています。) <input type="text"
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
二度押しで選択解除できるラジオボタン
解除できるラジオボタンを設置したいときもあります。 解除ボタンを追加して押させるのもスマートじゃないので、チェック済のラジオボタンを押したら選択解除できるようにしてみます。 ネットで情報を探すと苦戦している人も多いけど、チェックされてる値を記憶しておいて、同じラジオボタンが押されたら解除するだけ、意外と簡単です。 JQueryで書いてみましたが、別に素のJavaScriptでも簡単だと思います。 選択肢１ 選択肢２ 選択肢３ <script> $(function(){ var nowchecked = $('input[name=xxxx]:checked').val(); $('input[name=xxxx]').click(function(){ if($(this).val() == nowchecked) { $(this).prop('checked', false); no
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
