【Rails6】JavaScriptによる「入力フォームの内容のリアルタイムチェック機能」の実装例

9662 ワード
Rails JavaScript Validation フォーム Ruby Ruby テキストリンク

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;
}

参考資料

【Qiita】素のJavaScriptでFormバリデーション