検索ボタン押下時にJSチェック

!++++

Ver.5　[ 機能を見る ] [ 機能設定を見る ]
Ver.6　[ 機能を見る ] [ 機能設定を見る ]

!----

1. はじめに

Client-side JavaScript を用いて、検索時に検索条件の値をチェックする方法を紹介しています。

2. サンプル機能の内容と確認ポイント

検索ボタン押下時に値のチェック処理を追加するには、Client-side JavaScript を使用します。

また、検索ボタン押下時に検索条件を取得し、その値を検証する方法について、以下に示します。

Client-side JavaScript による実装内容は以下のとおりです。

1. resizeContents_end 関数内で検索ボタンの要素を取得します。

2. 取得した検索ボタンに対して、addEventListener を使用して click イベントを設定します。

3. 設定したイベント内で、「商品コード」の検索条件を取得します。

4. 「商品コード」の値が未入力の場合は、「商品コードは必ず指定してください。」というアラートを表示します。

🔍 確認いただけるポイント

• 「商品コード」の値が未入力の場合に、「商品コードは必ず指定してください。」というアラートが表示されること。
• 上記に伴い、検索処理がキャンセルされていること。

3. 画面イメージ

以下は、検索条件「商品コード」が未入力の状態で検索ボタンを押下した際に、アラートが表示される例です。

!++++

使用したコード一覧

!----