※2022年から技術系の記事は個人ブログに投稿しております。ぜひこちらもご覧ください→yamaday0u Blog
JavaScriptで以下のような「入力フォームの内容のリアルタイムチェック機能」を実装してみたので、その方法を共有します。
ポイントは、jQueryのようなライブラリは使用せず、そのままのJavaScriptで実装したことです。
ネットで検索してみると、意外とそのままのJavaScriptで実装した例を紹介する記事がヒットしなくて、jQueryを使った例ばかりだったので、今回記事にしてみようと思いました。
実行環境
Rails 6.0.3.4
各ファイルの記述
今回のメインである「入力フォームの内容のリアルタイムチェック機能」を実装する記述です。
正規表現の/^[\A\d+\z]/について補足します。半角数字にマッチする正規表現である\A\d+\zを^[]で囲うと、半角数字でないものにマッチする正規表現になります。
app/javascript/validation.js
const validation = () => {
//半角数字でないものにマッチする正規表現を変数化
const pricePattern = /^[\A\d+\z]/;
//エラーメッセージを表示する要素を変数化
const priceErrorMessage = document.getElementById("price-error");
//フォームの値が入る要素を変数化
const itemPrice = document.getElementById("item-price");
//キーボード操作がされた時にイベント発火
addEventListener("keyup", e => {
if (pricePattern.test(itemPrice.value) || itemPrice.value == "") {
//item-priceが半角数字か空白ならエラーメッセージは表示しない
priceErrorMessage.style.visibility="hidden";
}else {
//item-priceが全角数字ならエラーメッセージを表示する
priceErrorMessage.style.visibility="visible";
}
})
}
window.addEventListener("load", validation)
application.jsに上記のvalidation.jsを読み込みます。
app/javascript/packs/application.js
require("@rails/ujs").start()
require("@rails/activestorage").start()
require("channels")
require("../item_price")
require("../validation") //validation.jsを読み込む
ビューファイルの抜粋です。
app/views/items/new.html.erb
<%# 販売価格 %>
<div class="sell-price">
<div class="weight-bold-text question-text">
<span>販売価格<br>(¥300〜9,999,999)</span>
<a class="question" href="#">?</a>
</div>
<div>
<%# validation.jsで以下の1行を操作する %>
<div id="price-error" class="price-error">価格は半角数字で入力してください</div>
<div class="price-content">
<div class="price-text">
<span>価格</span>
<span class="indispensable">必須</span>
</div>
<span class="sell-yen">¥</span>
<%= f.text_field :price, class:"price-input", id:"item-price", placeholder:"例）300" %>
</div>
<div class="price-content">
<span>販売手数料 (10%)</span>
<span>
<span id='add-tax-price'></span>円
</span>
</div>
<div class="price-content">
<span>販売利益</span>
<span>
<span id='profit'></span>円
</div>
</span>
</div>
</div>
ビューファイルのスタイルシートの抜粋です。
app/assets/stylesheets/items/new.css
.price-error {
visibility: hidden;
color: red;
}