Font size input field is highlighted in red by default, showing that its value is invalid

[roryokane]

Problem

When I load https://play.nim-lang.org/ in Firefox, the “Font size” input field is shown in red:

Hovering over the field reveals a tooltip saying “Please select a valid value.”:

In Google Chrome, I don’t see the red highlight, but I still see the tooltip:

The red highlight and the tooltip are a distraction from the user’s main task of trying out Nim code.

Solution

The form should be initialized in a valid state so that the “Font size” text field looks and acts normal.

The validation happens because of the step attribute of that input element:

<input id="fontsize" type="number" min="8" max="50" step="2" required="required">

That input field is defined on line 250 in frontend.nim.

I suggest one of the following fixes:

• Change step to 1. As a side effect, this will cause the up/down buttons in the field to change the number by 1 instead of 2.
• Change the default font size to 14.

Note that adding novalidate to the input’s surrounding form element will not disable this validation – novalidate only affects validation upon submitting the form, not displayed errors.

[PMunch]

The step="2" was done because I didn't feel anyone would need that fine control. But I'm fine with either of the changes you proposed, please create a PR to fix it :)