Prefixing a number with + on html inputs

Question

When asking for positive number inputs on html, is it valid to allow + on the textbox? Like +42? Surely the + sign gets removed during server-side processing. But will allowing + be fine on the html textbox?

• It might be valid because + denotes a positive sign.
• It might be invalid because + is a special symbol.

What is the best practice for handling this?

Answer 1

That depends on:

• The purpose of the input field.
• What an User expect the page. (User Experience standpoint)

Lets discuss an example:

• For an e-shop page does not make sense to deal with negative numbers, even for discounts.
• For an dashboard page negative numbers can be used to plot graphs.

The best practice is to evaluate your requirements, and only if some feature is needed you implement it.

The common sense tell that every number is always positive, unless stated otherwise.

For the Validation

Using HTML Alone

Give your input tag a type number and let the browser do the validation for you.

Quote from MDN (check link below):

input elements of type "number" are used to let the user enter a number. They include built-in validation to reject non-numerical entries.

<input type="number" min="0" max="99">

If you can use some Javascript

On the input, you can place your custom validation function to be called on some event.

<input type="number" onkeypress="myCustomValidation()">

In this case, the function myCustomValidation will be called in response to the event automagically. Just choose an appropriate event to use.

Related Links

MDN - Input - Type Number

MDN - Events List

StackOverflow - Input - Prevent Negative

Answer 2

The value of a textbox ought to be passed to the server essentially untouched, it's generally the backend's job to make the input safe.

You might allow it if the backend can parse it as a number (many languages accept it), but I wouldn't make it a high priority, since it'd be pretty rare for someone to use it.

Answer 3

The first answer is great.

Assuming you will be performing a math function on the number. It would be easier to use inbuilt HTML validations that are described above. This way it is done directly in browser without the need to refer to a JS script. You can then pass the correct positive number to the server side script.

If there is no reason to have the symbol then don't accept or process it, it is just a waste of resource.

Answer 4

You should use the min attribute of the input element as it will prevent from entering negative values into the input field. Ex.

<input type="number" min="0">

Or else you can use the onkeydown attribute of the input element. It will prevent user from inserting special characters. Ex.

<input type="number" onkeydown="javascript: return event.keyCode === 8 || event.keyCode === 46 ? true : !isNaN(Number(event.key))">