お世話になっております。
以前、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の金額を設定し、金額の幅を設定する
③range_stepの金額に基づき、select入力を作り出し、下限値を設定する
■この中で必要なバリデーションとしては
- range_topは2以上の入力しか受け付けない
- range_topを上回るrange_stepの金額を受け付けない
- 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に変えるケースです)。例えば、一回入力したものは固定させて、変更したい場合はこれをすべてクリアさせるようなコマンドを組み込む等何かうまい方法はありますでしょうか?
まだまだ、勉強中の身で分かりづらい質問で恐縮ですが、
何卒、よろしくお願い申し上げます。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。