コメントフォームの入力必須を指定する required属性

html5新要素なので利用するにはテンプレートのDTD(ドキュメントタイプ宣言)をチェックしてください。html4.0などでは使えません。

コメントをもらう際に入力を必須にしておきたいものがいくつかあると思います。その方法です(簡単ですよ)

required属性追加の仕方

必須にしたいinput要素 に required (読み方: りくわぃあーど)を追加するだけです。例えばFC2ブログのコメント欄「URL」

元の内容

<input id="url" type="text" name="comment[url]" value="<%cookie_url>">

required属性追加

<input id="url" type="text" name="comment[url]" value="<%cookie_url>" required>

元の内容はテンプレートによって若干違いはありますが、概ねこんな感じです。id名が違ったりclass属性やplaceholder属性が付いていることもあります。
comment[url] というのはFC2ブログだけで使える特殊な変数です。

必須項目を入力せずに送信ボタン(サンプルではsend)を押すとアラートが表示されます。アラートの文言はブラウザによって異なります。サンプルはGoogle Chromeの例です。

FC2ブログテンプレートで行う場合には「コメント投稿」用フォームと「コメント修正」用フォームの 2つ がありますので、双方を変更するようにします。各input要素につき2度つづの修正が必要です。

少し前までSafariがrequired属性非対応でしたが現在では対応済み。実装状況はブラウザ依存で、ほとんどのブラウザが実装済みになりました。

利用上のヒント

投稿者に対して予め「必須」であることを伝えたい場合は placeholder属性も追加しましょう。

<input id="url" type="text" name="comment[url]" value="<%cookie_url>" placeholder="入力必須" required>

placeholerで表示されるテキストの色や大きさはCSSプロパティの -webkit-input-placeholder-moz-input-placeholder で行います。今のところplaceholderのカスタマイズに対応しているのはwebkit(safari), chromium系列(Google Chrome, Ironなど)ブラウザとFirefoxのみです。

#xxx::-webkit-input-placeholder {
  color: rgb(150,150,150);
  font-size: 1.2em;
}

#xxx::-moz-input-placeholder {
  color: rgb(150,150,150);
  font-size: 1.2em;
}

まとめ

「この項目は必ず記入してください」と明記しても無視されてしまうことがありますので、管理者側で事前の対策を取っておくと良いですね。

----- 追記 2019.3.31

認証ページの件を完全に失念しておりました。
認証ページ(コメントの確認設定)を利用している場合requiredの効力はありません。
注意点として追記致します。
コメント設定「コメントの確認の設定」

ご報告頂いた そふぃあ さん にお礼申し上げます。

そふぃあ
2019/03/30 (Sat) 10:34

ありがとうございます!

Yahoo!ブログは管理者が自動的にリンクされる仕様だったので、Yahoo!ブログ時代からのお友達の中に無記名のままコメントしてくれる人がいて困っていました。(;^ω^)
簡単に設定できたので、とても助かりました。いつも貴重な情報をありがとうございます。

私は名前とリンクの両方に要素を加えてみましたが、中にリンク無しで投稿してくれるお友達がいて「???」でした。
気が付けば私のミスでしたが、コメントを投稿する際に確認画面を「表示しない」に設定しておかないと、確認画面で消されてしまうのですね。

vanillaice (Akira)
Akira
2019/03/31 (Sun) 17:10

To そふぃあさん

お返事遅くなりました (*_ _)

ホントですね。あぅ ( ̄∀ ̄;)
これはそふぃあさんのミスではありません。私自身が認証ページを使っていないので完全に失念しておりました。すみません ( ̄∀ ̄;)
記事の方にも追記しておきますね。ありがとうございます。助かりました ^^;

そふぃあ
2019/04/01 (Mon) 09:17

お返事ありがとうございます

おはようございます。
追記作業、お疲れ様でした。

私、大変そそっかしいので、コメントしておきながら書いた事に確証が持てなくて心配しておりました。(;^ω^)
今朝、再び同一人物のブログ友さんからコメントいただきまして、またURL記入スルーされておりました。
ブログ友承認済みのお友達には、認証画面でスルーする以外にも掻い潜れるというFC2の仕様かも知れませんね。

vanillaice (Akira)
Akira
2019/04/01 (Mon) 14:52

To そふぃあさん

こんにちは ('0')/

これね、相手方の環境にも依存するんですよね。OSやブラウザのアップデート・アップグレードを全然やってない、という方もいらっしゃるでしょうし。
あとは「入力しなければボタンを押せないようにする」という方法もあります。こちらはJS実装です。
また記事にしてみようかとは思いますが、あまりおすすめできる方法ではない ^^;
それからFC2は「ブロとも」と「足跡(訪問履歴)」の関連性がクッキー情報やログイン情報に影響するんですよ。ここどうにかならんのか、と思ってるんですけどねぇ (´・ェ・`)

名前書いてくれないと困りますよね (´・ω・`)
あとリンクも、訪問してほしいならお願いだから書いて?って思います(笑)

そふぃあ
2019/04/01 (Mon) 16:43

To Akiraさん

こんにちは!
何度もお返事ありがとうございます。

> FC2は「ブロとも」と「足跡(訪問履歴)」の関連性がクッキー情報やログイン情報に影響するんですよ。
そうなんですね!ちょっとビックリです。

URL問題は必要があればリンクや足跡をたどるとして、設定したアラートのお陰で、問題だった「名無し対策」は大丈夫そうです。
いつもありがとうございます。(これ以上のお返事は不要ですよ。お忙しいのに何度も失礼しました。)

★藤堂(Newsider Tokyo)
2019/10/20 (Sun) 11:29

助かります。

大変勉強になる、ありがたいブログです。
早速導入。ウチはコメント数が多いので、HN入力の是非は議論化してました。
今後も勉強させてください。

vanillaice (Akira)
Akira
2019/10/20 (Sun) 17:18

To ★藤堂(Newsider Tokyo)さん

こんばんは。

匿名が良いという方も少なくはないですね。
でももうwebであっても何か発言するならばそれなりの責任は背負った方が(背負わせた方が)良いと思うんです (∵`)
といってもどのみちハンドルネームですからアレでソレだけど ^^;

-----
あと、★藤堂さんのテンプレートはhtml5ではありませんので本来はrequiredの使用に準拠していません。一応ブラウザが上手くやってくれてますが、本来はNGです、という点を念の為お伝えしておきますね。

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)