<input>のstep属性に違反する入力をした時にエラーメッセージを表示させない事は可能か

お世話になります。
アクセシビリティ対策の一環として<input type="number">のstep属性を多用していたのですが、これに違反した入力をするとエラーが出る事を知りました。
例えば<input type="number" step="500" value="3000">円
とすると、500円刻みの値段を素早く入力できて便利なのですが、例えば3200などと入力した場合には、有効な値を入力してくださいとエラーが出てしまいます。
stepの仕様上、当然の挙動とは思いますが、このエラーを表示させない方法はありますか。
それともstepは入力値を制限するための属性なので、上記の3200などを許容したい場合にはstepは使うべきではないのですか。
しかしstepを使わないと3500を入力する手間が一気に増えて使いづらくなるので、どうすべきか考えている所です。
このような場合の先生方の方針を教えてください。

No.1 ベストアンサー 回答者： むっすー 回答日時： 2023/02/16 10:13

step属性は入力値を制限するための属性であるため、あえて3200のような値を許容する場合には、step属性を使うべきではないと思います。

例えばですが、stepを100にしておき、そのinputフィールドの近くに[+500] や[+1000]などのボタンを配置し、クリックするとフィールド内の数字が増えるようにjavascriptで制御してみてはいかがでしょうか。

この回答へのお礼

ありがとうございます。
やはり私もそう思います。

となると、どうしてもやりたいならご提示のとおりボタンを自作するしかないのですが、そうするとせっかくクロームが用意してくれた増減ボタンを無視する事になり冗長に感じてしまいます。

そういうわけでstep属性を外すのは絶対として、ボタンを作るかは未だ決められずにいます。

お礼日時：2023/02/16 12:21

No.2 回答者： Ogre7077 回答日時： 2023/02/16 10:13

<input type=number> <a>+500</a> <a>-500</a>

参考)
https://getbootstrap.jp/docs/4.2/components/inpu …

この回答へのお礼

増減リンクを作成せよとのご提案でしょうか。

参向サイトはうまく動かせませんでした。
側だけでしょうか。

ひとまず許容したい値を制限するようなstepは設定すべきでないという事が分かりましたので満足です。
自作ボタンを作るかは検討課題とします。

お礼日時：2023/02/16 13:48