In my current web project I have a textbox where the user can enter a bid for an auction. However, to prevent bidding of arbitrary sums, only certain values that match predetermined intervals are allowed.
For example, if the current bid is 240€, the user cannot bid 241€, he has to bid 260€, 280€ or 300€ (and so on). The bid can be as large as he wants however, it just has to fit the intervals.
To make life easier for the user, I show him the possible bid values that are close to what he enters into the textbox:
My problem is that this doesn't really stop anyone from entering and submitting invalid values. Users will see the values as a suggestion and still enter other values. All I can do is show an error when this happens and suggest another value that would be close to what he entered. This is cleaning up after the fact, but I would rather help the user in a preemptive manner.
Is there a better solution that makes it more clear to the user that he has to select one of the values I suggest to him and cannot submit anything? I thought about using logarithmic sliders instead of a textbox, but there is no maximum amount one can bid and my customer is somewhat favoring a textbox solution.
<input type="number" min="260" step="20" />and call it done. Perfectly functional, with built-in native validation. Not great on design though.