DEV Community

Lakshmanan Arumugam
Lakshmanan Arumugam

Posted on

Be careful when you using an input "number" field in your web app

Recently I faced one interesting issue when I working on my web application. I thoughts it will help others.

Introduction

is one of the HTML tags and has some types are text, number, password..etc., So, a user able to give a value through to the input. Each input type field has some generic behavior. Input number type field rejects non-numerical entries.

Technical use case:

If a user is able to create a custom number field in your product and add the field inside a product form(Add contact form). Inside the Contact form, the number field value will have an auto-generated large number of digits.

Problem

If an input field has without limit the min and max length of the number. if the user is able to more than 20 digits number value, the javascript engine only accepts as specified in IEEE 754 remainings will automatically change 0.

Example:
Alt Text

This is an issue.

Solution 1

By default, limit the number field max length and before save the field validation also.

<input type="number" min="-9007199254740991" max="9007199254740991"/>
Enter fullscreen mode Exit fullscreen mode

Solution 2

Whenever we save the user number field value before the two conditions need to check.

function saveNumber(value) {
   if( Number.MIN_SAFE_INTEGER <= value && Number.MAX_SAFE_INTEGER >= value)
     //do save stuff
   }else {
     // Throw error
   }
}
Enter fullscreen mode Exit fullscreen mode

Done and thanks for reading this post...

Oldest comments (3)

Collapse
 
lyrod profile image
Lyrod

And remember that, anyone can edit the html to remove the input's type!

Collapse
 
hima_khaitan profile image
Himanshu Khaitan

Damn!