質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

2680閲覧

Javascriptで金額の範囲を指定させる方法

SugiuraY

総合スコア317

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/02/22 14:18

お世話になっております。

以前、JavaScriptを使用した金額の範囲に関するバリデーションについて
お伺いしたことがあるのですが、あまり設計自体が適切ではなかったため、異なるアプローチでご質問させていただきます。

■入力formで以下の3つの金額範囲に関する要素をユーザーに入力してもらおうと考えています。
<input type="text" name="range_top" placeholder="100,000">
<input type="text" name="range_step" placeholder="20,000">

<!-- range_top及びrange_stepの入力に基づき、以下のselectをjsで生成する--> <select name="range_bottom" placeholder="80,000"> <option value="80,000">80,000</option> <option value="60,000">60,000</option> <option value="40,000">40,000</option> <option value="20,000">20,000</option> <option value="1">1</option>

■ユーザーの入力とページの動きは以下の通りです、
①まずrange_topの金額で上限の設定する
②range_stepの金額を設定し、金額の幅を設定する
③range_stepの金額に基づき、select入力を作り出し、下限値を設定する

■この中で必要なバリデーションとしては

  1. range_topは2以上の入力しか受け付けない
  2. range_topを上回るrange_stepの金額を受け付けない
  3. range_top金額を2で除した金額以上のrange_stepは受け付けない

注)例えば、上限を100,000で定めて金額の幅を80,000に設定した場合、100,000と20,000と1の選択肢のみとなり、あまり意味のない金額幅の設定となるため、最低でも100,000と50,000と1の選択肢からとする
4)当然、select入力はrange_topからrange_stepを控除した金額以下のものしか選択肢として出力しない。
注)例えば、上限を100,000で金額の幅を20,000で選択した場合、下限の金額は必ず80,000円以下の選択肢となる。

■これらについて、一点だけ留意点があります。range_bottomの下限金額まで設定したのちにユーザがやはり上限金額やステップを変えたいと考え操作することが予想されます。

【ご質問】
A) 以上のようなバリデーションをEventTarget.addEventListenerやDOMを使用してなんとかうまく作りたいのですが、実装することは可能でしょうか?JSがまだ初心者のため、コードや実装のイメージがわかないため、どなたかアドバイスいただければ幸甚です。

B)最後に申し上げた留意点が、かなりの関門なのですが、このように3つの入力値が互いに制約を与えているため、例えば最後までバリデーション通りに入力しても、後から上限金額や金額の幅を変えたい場合、相対的にすべてのバリデーションが変わってきてしまいます。このような場合どのように対応するのが良いでしょうか?(上限100,000 幅20,000 下限 60,000で設定して受け付けたのに、後とから上限を5,000に変えることや、幅50,000に変えるケースです)。例えば、一回入力したものは固定させて、変更したい場合はこれをすべてクリアさせるようなコマンドを組み込む等何かうまい方法はありますでしょうか?

まだまだ、勉強中の身で分かりづらい質問で恐縮ですが、
何卒、よろしくお願い申し上げます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

当然なのですが、変更する操作がある度に全部のバリデーションを再実行する形がいいです。

投稿2017/02/23 08:42

yamato_hikawa

総合スコア2092

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

range_topとrange_stepのバリデーションはchange時でよいですか?
selectの生成はrange_top,range_stepそれぞれのchange時でしょうか?
別途select作成用のボタンを置いたほうが良い気もしますが・・

range_bottomの下限金額まで設定したのちにユーザがやはり上限金額やステップを変えたいと考え操作

については、range_top,range_stepのchangeまたはボタンのclickが
select作成のトリガーとなるなら、selectを削除した上で再度
selectを作成すればいいだけではないでしょうか?

投稿2017/02/23 03:52

yambejp

総合スコア114775

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問