【 jQuery】プラグイン無しで［Contact Form 7］にjQuery Datepicker（カレンダー機能）を追加する方法
【 jQuery】プラグイン無しで［Contact Form 7］にjQuery Datepicker（カレンダー機能）を追加する方法 ワードプレスプラグインの［Contact Form 7］使用時に、日付選択でカレンダー機能を追加する場合、4〜5年前までは［Contact Form 7 Datepicker］を利用するケースがほとんどでした。 しかしながら［Contact Form 7 Datepicker］はクロスサイトスクリプティング（XSS）の脆弱性が発覚し、すでに開発が終了しています。 公式ディレクトリからも削除されていますね。 同じ機能の代替プラグインとしては［Date Time Picker for Contact Form 7］が存在します。 Date Time Picker for Contact Form 7 もし［Contact Form 7 Datepicker］を
【Contact Form 7】リアルタイムで必須項目の未入力や不適正値を検証・背景色や枠色を変える方法【jQuery-Validation-Engine】 | webico blog
こんにちは、しばです。 WordPressでフォームを入れるとき、Contact Form 7によくお世話になっています。 Contact Form 7は標準でエラーチェックが出来るんですが、ここをもうちょっとカスタマイズしたいなぁというときはないでしょうか？ 今回は、 必須項目が未入力だった場合 入力されたが不適正値だった場合（例： type=”tel”で数字以外の文字が入力される） こういった時、リアルタイムで（入力直後に）注意メッセージを表示させたい。また、その際に入力項目の背景色や枠色を変えたいと思いました。 入力項目のステータス変化に関してはcssで単体で:requiredや:validで装飾できますが、できたらリアルタイム表示のエラーメッセージに紐づけたいところ。 ということで、Contact Form 7 + jQuery-Validation-Engineの実装方法からスタ
Free Frontend
HTML In this curated compilation, we have gathered a diverse range of HTML code snippets that showcase various functionalities and techniques 12 collections CSS In this carefully curated compilation, we have gathered a wide array of CSS code snippets that demonstrate the power and versatility of Cascading Style Sheets 192 collections JavaScript In this meticulously curated compilation, we have ass
【HTML5 + jQuery】音声ファイルの再生／停止を制御するボタン
投稿日：2020年7月30日 更新日：2021年12月2日 HTML, jQuery 1859文字：約4分 Issey Hara 原 一勢 ONZE https://on-ze.com/archives/8136 ウェブサイトで音声ファイルを再生したい場合、HTML5で単純にaudioタグを使うだけで実現できますが、今回はさらにJQueryを利用して再生と停止をコントロールする方法を紹介します。 まずはHTMLの記述です。 <audio src="sample.mp3" id="audio" pause="pause" loop="loop"></audio> <button id="btn" type="button"><span>再生</span><span>停止<span></button> ここではわかりやすく、audioファイルにid="audio"を、制御するためのボタンを配置
カスタマイズ性、拡張性を重視して設計された非依存型のメディアプレーヤー・「vime.js」
vime.jsはカスタマイズ性、拡張性を重視して設計された非依存型のメディアプレーヤーです。 基本的には単体で動作しますが、ReactやVue、Svelteなど他フレームワークもサポートされています。 動画はvideoタグによるメディアファイルは勿論、 MPEG DASHやYouTube、Vimeoなどにも対応しています。 動作サンプルです。動画を再生するだけならシンプルなセッティングで済みます。 前述通り、カスタマイズ性も重視した設計となっているので設定メニュー項目を追加したり他言語対応したりコントローラーを調整したりする事も可能となっています。 全ての機能を使いこなすにはそれなりの学習コストがかかりますが、ドキュメントもしっかり用意されているので学びやすいかなぁとは思います。 本ライブラリはオープンソースとして公開されています。ライセンスはMITとの事です。 vime.js
jQuery スクロールしたらクラスを付与する方法 - by Takumi Hirashima
jQuery スクロールしたらクラスを付与する方法を紹介します。 例えば、スクロール後にヘッダーを固定したい時に便利な方法です。 スクロールしたらクラスを付与する方法 コードの解説 スクロールしたらクラスを付与する方法 スクロールしたらクラスを付与する場合は scroll イベントを利用します。 例えば、ページ上部から 20px スクロールした場合に、#header 要素にクラス「fixed」を付与する場合は、次のコードを追加します。 $(window).scroll(function () { if($(window).scrollTop() > 20) { $('#header').addClass('fixed'); } else { $('#header').removeClass('fixed'); } }); 上記のコードは jQuery 単体のコードになります。 jquery
下にスクロールで非表示、上にスクロールで再表示する固定ヘッダーを実装する方法
下にスクロールで非表示、上にスクロールで再表示する固定ヘッダーを実装する方法 固定ヘッダーのCSSはこんな感じです。transitionを追加しておくことで、ヌルっと表示/非表示されます。 header { width: 100%; padding: 10px 0; position: fixed; top: 0; left: 0; z-index: 3; transition: all .3s ease; } <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(function () { var hd_size = $('header').innerHeight(); //ヘッダーの高さを取得 var pos = 0; $(window).on('scr
jQueryで入力フォームの可変項目を増減する度にname属性を採番する
jQueryで入力フォームの可変項目を増減する度にname属性を採番する タイトルちょっと何言ってるかわかりませんが、フォームの入力項目をjQueryで増減させたりすることがあるかと思うのですが、その際name属性に指定されている配列のindexを採番し直す方法をご紹介します。 投稿日2020年09月22日 更新日2020年09月22日 HTML 次のようなHTMLがあるとします。 追加ボタンをクリックするとリストが一つ増え、削除ボタンをクリックするとリストから項目が削除されます。 name属性にインデックスが割り当てられているのがわかります。 このインデックスを例えば２つ目の項目が削除された場合でも0,1となるようにします。 <div class="items"> <button class="add-btn">追加</button> <ul class="item-list"> <li
jQuery UI Datepickerのカレンダーを祝日対応する方法
フォーム内で日付をカレンダーから選択できるようになる「jQuery UI Datepicker」ですが、表示されるカレンダーは祝日に対応していません。 日曜日と祝日の色を変えたいという要望があり、カレンダーに日本の祝日を反映させて対応したので、備忘録として残しておきたいと思います。 jQuery UI Datepickerのカレンダーに祝日を反映させる方法 祝日の情報は、Holidays JP APIを使って取得します。Holidays JP APIは祝日のデータを返してくれるAPIで、祝日のデータはGoogleカレンダーの情報から自動で生成されます。 Holidays JP APIで取得した祝日の情報をjQuery UI Datepickerのカレンダーに反映させます。 具体的には、以下のようにスクリプトを記述します。 ※jQuery UI Datepickerの導入手順については、こち
シンプルなニュースティッカーを実装できるjQueryプラグイン「jquery.simpleTicker.js」
jquery.simpleTicker.jsは、回転したり横からスライドインしてくるニュースティッカーを実装できるjQueryプラグインです。 挙動については、以下デモページよりご確認いただけます。 デモページを見る jquery.simpleTicker.jsの使い方 ステップ1. jquery.simpleTicker.jsのダウンロードと設置 GitHubよりjquery.simpleTicker.jsをダウンロードします。 jquery.simpleTickerフォルダ内に入っている「jquery.simpleTicker.css」と「jquery.simpleTicker.js」をサーバー上に設置しましょう。 <head>内に以下を追加してそれぞれのファイルを読み込みます。 <link href="./jquery.simpleTicker/jquery.simpleTicker
ajaxzip3を使ってボタンクリックで郵便番号から住所を自動入力する方法
先日紹介した「ajaxzip3」は、リアルタイムで郵便番号から住所を自動入力してくれます。郵便番号を入れるだけで自動で住所も入力してくれるので、大変便利なライブラリです。 ですが、リアルタイムでは入力してほしくないという場合もあるかもしれません。そんな時のために、リアルタイムで自動入力するのではなく、ボタンをクリックしたタイミングで住所を入力する方法をご紹介したいと思います。 ボタンクリックで郵便番号から住所を自動入力する方法 ステップ1. ajaxzip3とjQuery本体の読み込み まずは、ajaxzip3とjQuery本体を読み込みましょう。ajaxzip3にjQueryは不要ですが、ボタンクリック時に住所検索するスクリプトをjQueryで実装します。 ajaxzip3はGitHubからダウンロードするか、公開されているスクリプトを使用します。 <script src="//ajax
スクロールすると途中で表示される「トップへ戻るボタン」の実装。さらにフッター手前で止める場合の実装。 | Recooord | Web制作で扱うコーディングスニペットを紹介
HOMEJavaScriptスクロールすると途中で表示される「トップへ戻るボタン」の実装。さらにフッター手前で止める場合の実装。 スクロールすると途中で表示される「トップへ戻るボタン」の実装。さらにフッター手前で止める場合の実装。 JavaScript スクロールすると途中で表示される「トップへ戻るボタン」の実装 See the Pen scroll-to-top_standard by RECOOORD (@recooord) on CodePen. 上記デモを下へスクロールしてください。 「 トップへ戻るボタン 」が途中で表示され、クリックするとページトップに戻ります。 今回はこちらの実装方法を紹介していきます。 HTMLの記述 <section>SCROLL DOWN</section> <p class="button">㊤</p> 「 section 」タグはページのコンテンツ部
jQueryを使って要素のフィルタリング機能を実装する方法
jQueryを使って、フィルタリング機能を実装する方法をご紹介いたします。要素をグループ分けし、各グループ毎に要素の絞り込みを行います。 簡単なデモを用意したので、挙動については以下よりご確認ください。 デモを見る jQueryを使って要素のフィルタリング機能を実装する方法 まず、HTMLは以下のようにマークアップします。 <ul class="filtering"> <li><span data-filter="all" class="active">すべて</span></li> <li><span data-filter="fil-1">フィルタ1</span></li> <li><span data-filter="fil-2">フィルタ2</span></li> <li><span data-filter="fil-3">フィルタ3</span></li> </ul> <ul c
他のページからのアクセス時に特定のタブコンテンツを開く方法
以前、タブ切り替え型のコンテンツを作成する方法をご紹介いたしました。 通常、他のページからタブが設置されたページにアクセスすると、1つ目のタブがアクティブな状態になります。ですが、他のページからアクセスした時に、指定したタブをアクティブにしたい、ということもあるかと思います。 そんなわけで、今回は他のページから特定のタブコンテンツへダイレクトにアクセスする方法をご紹介したいと思います。リンクにパラメータを追加する方法とハッシュを追加する方法の2パターンを解説いたします。 タブ切り替え型コンテンツの作成 まずは、タブ切り替え型のコンテンツを作成します。HTMLは以下のようにします。 <div id="tabs"> <ul> <li id="tab1"><a href="#panel1">タブ1</a></li> <li id="tab2"><a href="#panel2">タブ2</a><
YouTube動画や画像をポップアップ表示できるjQueryプラグイン「Lity」
Lityは、YouTube動画や画像などをポップアップで表示できるjQueryプラグインです。動画や画像のリンクをクリックすることで、いわゆるモーダルウインドウとして表示させることができます。 配布サイトでデモが用意されていますので、挙動についてはこちらでご確認ください。 Lityの使い方 ステップ1. jQuery本体とLityの読み込み LityはCDN経由で提供されていますので、以下コードを<head>～</head>内に追加することでLityを読み込めます。 <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/lity/2.3.1/lity.css'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min
jQueryで簡単！フォームをリアルタイムで入力チェック [ホームページ作成] All About
フォームの入力チェックは、JavaScriptでリアルタイムにできると便利 ウェブ上のフォームに何らかの入力をするとき、一旦送信してからエラーを表示されるよりも、その場でリアルタイムに入力ミスを指摘してくれる方が便利です。その方がページを移動する手間が省けますし、戻る際に入力内容が消えてしまう心配もなくなるからです。 ■入力チェックは、複合条件だと特に手間がかかる フォームへ入力された内容のチェック機能を自力で作るのはかなり面倒です。特に「この項目のチェックがONの場合にだけ、隣のテキスト入力欄への入力が必須」といった複合条件でチェックするのは大変でしょう。HTML5には個別に入力チェックする機能がありますが、複数項目を組み合わせたチェックをしたければ、JavaScriptなどを併用するしかありません。 ■見やすくて分かりやすい形でエラーを表示したい ユーザの入力や選択にミスがあればエラー
![jQueryで簡単！フォームをリアルタイムで入力チェック [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/53261f4457e0fb42c78173601df18b35aa3e7ed4/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F2%2F0%2F3%2F2%2F7%2Ftopimg_large.png)
Contact Form 7 リアルタイムでエラーをチェックをする方法 | VIVA!TANACIO
追記 – 2021年8月21日 チェックボックスとラジオボタンのバリデーションができなくなりました。 リアルタイムバリデーションならデフォルトで機能を備えている WPForms というプラグインを試してみることをオススメします。 最近よく目にするEFO（エントリーフォーム最適化）、その中で重要でかつ、あまり実践されていないのが、ユーザーがどの入力項目にエラーがあるのかリアルタイムで把握できる機能ではないでしょうか。僕もよく、入力が完了し送信ボタンをクリックした後に、「全角で入力してください」とエラーを出されイライラさせられるフォームに出会います。僕は慣れているのでこれでフォームから離脱することはないのですが、あまりパソコンやスマホに慣れていない人は面倒くさくなって離脱してしまうという気持ちが分かります。 ですので、WordPressのお問い合わせフォームなどのメールフォームプラグインでよく
Contact Form7で、jQuery-Validation-Engineを使ってチェック ほか - Qiita
WordPressのプラグイン Contact Form 7 方々で使われていますが、 単品でのバリデーション機能には不満が残ります。 具体的には・・・ ・確認画面が無い 「メールアドレスの記述形式は正しかったが、 アドレスを打ち間違えた」ようなミスのチェックができない。 ・入力内容を、DBに保存しておくことができない ・チェック機能が貧弱 「入力項目が必須かどうか」、 「メールアドレスなどの書式を満たしているか」、 「数値の最大値、最小値」などの判定のみ。 入力と同時に判定したり、チェックする内容のカスタマイズが困難。 （ソースを直接修正するのもありですが、手間が多すぎる） 1番目の問題点は、「Contact Form 7 add confirm」などの プラグインを利用すれば、解決は容易です。 ２番目の問題点に関しても、「Contact Form DB」で CSV出力や、送信別に入力項
リアルタイムで入力チェック： jQuery-Validation-Engine のカスタマイズ - Qiita
input のクラス名にvalidate[required,custom[zip]] を指定。 メールアドレスを docomo の特殊なアドレスでも通過するようにする 稀に、メールアドレスの＠以前で ドットが2つ以上連続している ものがあります。 例：example...xxxx@docomo.ne.jp 何年か前に、RFC（国際標準みたいなの）に準拠しないこの形式のアドレスは新規登録できなくなりましたが、そのまま使われているケースもあります。 デフォルトだと、上記のようなアドレスはチェックに引っかかって通過できません。 before "email": { // Shamelessly lifted from Scott Gonzalez via the Bassistance Validation plugin http://projects.scottsplayground.com/e
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【これだけ覚えて！】jQueryの書き方（js学習ステップ第三弾） - PENGIN BLOG
