はじめに

実務で文字数カウントを実装した際に、Laravelのmaxバリデーションと文字数カウントの上限が合わないことがあったため、Laravelで文字数カウントを作成する際の注意点を記したいと思います。

実装したコード

use.blade.php

<textarea id="care_skill_text" class="text_count" data-count="count1" name="care_skill_text"></textarea>
<p id="count1"></p>

UserController.php

    $request->validate([
            'memo' => 'numeric|max:100'
    ]);

	const textCount = document.querySelectorAll('.text_count');
	textCount.forEach(function(e){
		const data = e.getAttribute('data-count');
		const count = document.getElementById(data);
		const num = count.getAttribute('data-num');
		const numInt = parseInt(num)
		count.textContent = e.value.trim().replace(/[\n]/g, "aa").length;
		e.addEventListener('input', () => {
			count.textContent = e.value.trim().replace(/[\n]/g, "aa").length;
			if(count.textContent > numInt){
				count.style.color = "red";
			}else{
				count.style.color = "#4F4849";
			}
		})
	})

laravelのmaxバリデーションは、改行は２文字カウントである。そのため、文字数カウントで表示させる数字もそれに合わせなければいけません。

.replace(/[\n]/g, "aa")

この部分で改行を２文字カウントとしています。

最後に

今回文字数カウントというシンプルな機能の実装でしたが、Laravelのバリデーションの文字数の仕組みについて知れるいい機会でした。

今後も色々な機能を実装していきたいと思います。