投稿に文字数制限を設定する

投稿の文字数を設定する

前回は掲示板への投稿について、ブラウザのリロード（再読み込み）によって多重送信されてしまうのを防ぐ機能を実装しました。
当ワークショップの最終回となる今回は、投稿できるひと言メッセージの文字数を設定していきます。

以下の例はやや極端ですが、最大文字数を10文字に設定して11文字以上の時に投稿をしようとしたときのブラウザ表示例です。

ここで、投稿するメッセージの末尾から「さ」を削除してもう1度投稿してみます。

今度はちょうど10文字だったので投稿することができました。
すでに未入力のバリデーションを実装していますが、今回は最大文字数のバリデーションを追加していきます。

「ひと言掲示板を作る」の概要については「ひと言掲示板を作る」をご覧ください。
デモはこちら

前回までに作成したコードはこちら：Github

投稿されたメッセージの文字数をカウントする

今回は投稿された「ひと言メッセージ」の文字数を数える必要がありますが、ここではmb_strlen関数を使います。
この関数は第1パラメータに渡した文字列の数を整数（int）で返します。
第2パラメータはオプションで文字コードを指定することができます。

mb_strlen関数

mb_strlen( $message, 'UTF-8');

もし変数$messageに入っている文字列が「testテスト」なら「int(7)」が返り値となり、「testテスト1234567890」の場合は「int(17)」が返り値になります。
文字列は半角、全角が混ざっていても大丈夫です。
改行も1文字として扱われます。

最大文字数のバリデーションを実装

文字数のカウント方法がわかったところで、さっそく掲示板に実装していきましょう。
ひと言メッセージの投稿データを入力チェックするif文に、新しくelse文を追加します。
「index.php」を開き、以下の赤字のコードを追記してください。

index.php

<?php

---- 省略 ----

if( !empty($_POST['btn_submit']) ) {

  // 空白除去
  $view_name = preg_replace( '/\A[\p{C}\p{Z}]++|[\p{C}\p{Z}]++\z/u', '', $_POST['view_name']);
  $message = preg_replace( '/\A[\p{C}\p{Z}]++|[\p{C}\p{Z}]++\z/u', '', $_POST['message']);

  // 表示名の入力チェック
  if( empty($view_name) ) {
    $error_message[] = '表示名を入力してください。';
  } else {

    // セッションに表示名を保存
    $_SESSION['view_name'] = $view_name;
  }

  // メッセージの入力チェック
  if( empty($message) ) {
    $error_message[] = 'ひと言メッセージを入力してください。';
  } else {

    // 文字数を確認
    if( 100 < mb_strlen($message, 'UTF-8') ) {
      $error_message[] = 'ひと言メッセージは100文字以内で入力してください。';
    }
  }

  if( empty($error_message) ) {
    
  // 書き込み日時を取得
  $current_date = date("Y-m-d H:i:s");

---- 省略 ----

このコードでは最大文字数を「100文字」にしています。
mb_strlen関数の返り値と「100」を比較し、もし$messageに入っている文字列の数が101文字以上だったときはエラーメッセージを設定します。

続いて、エラーがあったときに「ひと言メッセージ」の入力欄にすでに入力したテキストが入るように設定します。
以下の赤字のコードを追記してください。

index.php

---- 省略 ----

<form method="post">
  <div>
    <label for="view_name">表示名</label>
    <input id="view_name" type="text" name="view_name" value="<?php if( !empty($_SESSION['view_name']) ){ echo htmlspecialchars( $_SESSION['view_name'], ENT_QUOTES, 'UTF-8'); } ?>">
  </div>
  <div>
    <label for="message">ひと言メッセージ</label>
    <textarea id="message" name="message"><?php if( !empty($message) ){ echo htmlspecialchars( $message, ENT_QUOTES, 'UTF-8'); } ?></textarea>
  </div>
  <input type="submit" name="btn_submit" value="書き込む">
</form>

---- 省略 ----

ここまでの編集内容を保存して、ブラウザでひと言メッセージの投稿を試してみてください。

編集ページも最大文字数のバリデーションを実装

ひと言メッセージは「index.php」での新しい投稿の他に、管理者用の編集ページ「edit.php」からも投稿（編集）することができるようになっています。
そこで、編集ページも同じように最大文字数のバリデーションを設定していきます。

「edit.php」を開いて、先ほどと同じようにメッセージの入力チェックのif文にelse文を追記する形で、赤字のコードを追記してください。

edit.php

<?php

---- 省略 ----

} elseif( !empty($_POST['message_id']) ) {

  // 空白除去
  $view_name = preg_replace( '/\A[\p{C}\p{Z}]++|[\p{C}\p{Z}]++\z/u', '', $_POST['view_name']);
  $message = preg_replace( '/\A[\p{C}\p{Z}]++|[\p{C}\p{Z}]++\z/u', '', $_POST['message']);

  // 表示名の入力チェック
  if( empty($view_name) ) {
    $error_message[] = '表示名を入力してください。';
  }

  // メッセージの入力チェック
  if( empty($message) ) {
    $error_message[] = 'メッセージを入力してください。';
  } else {

    // 文字数を確認
    if( 100 < mb_strlen($message, 'UTF-8') ) {
      $error_message[] = 'ひと言メッセージは100文字以内で入力してください。';
    }
  }

  if( empty($error_message) ) {

    // トランザクション開始
    $pdo->beginTransaction();

---- 省略 ----

許容する最大文字数はここでも同じ「100文字」に設定しています。

ここまでの編集内容を保存して、こちらのページでも管理者としてログインして動作を確認してみてください。
以上で今回の内容は完了です。

今回まで作成してきた「ひと言掲示板」について、一通りの機能を実装してきました。
当ワークショップはここまでとなります。

ワークショップへのフィードバックやご要望はいつでも大歓迎です。
記事の下部にある「こちらの記事は役に立ちましたか？」のボタンを押すと表示されるメッセージ欄か、お問い合わせページよりお気軽にお送りください。
いつでもお待ちしております。

今回作成したコード：Github

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。