Input text box as positive/negative/floating number with max length 11

Question

Number : <input type="text" name="inputId" id="quantity" maxlength="11" />

When user enter input it should satisfy below conditions 1. Value can be positive or negative or floating with max length 11

This is what I have written so far

$(document).ready(function () { //called when key is pressed in textbox $("#inputID").keypress(function (e) { //if the letter is not digit then display error and don't type anything if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57 || e.which == 45 )) { //display error message if(e.which == 45) { var value = $("#quantity").val(); if(value.indexOf('-') != -1) { var index = value.lastIndexOf('-'); if(index = 0){ return false; } } } else { $("#quantity").val("-"); } } }); });

I did not consider "." as of now only for negative sign should be at index zero.

is there any better way to do this or modifying this code would be the right way to go.

kindly suggest.

Would it be simpler to do the check on submit rather than on key press? — evolutionxbox
– evolutionxbox, Commented Apr 29, 2015 at 8:32
this is what is specified in req. user will not be able to enter — Akki619
– Akki619, Commented Apr 29, 2015 at 8:34
@evolutionxbox a check on submit will be very unfriendly to the user. In UX perspective realtime error or validation check is adviced — Harigovind R
– Harigovind R, Commented Apr 29, 2015 at 8:35

Rajeev Goel · Accepted Answer · 2015-04-29 09:27:21Z

Probably the easiest approach would be to use HTML5 validation:

<body> <form> <input type="text" maxlength="11" pattern="\-?\d+\.?\d+" /> <input type="submit" value="Submit" /> </form> </body>

https://jsfiddle.net/9g0txx68/2/

Robert Lee · Accepted Answer · 2015-04-29 08:43:47Z

What your doing seems reasonable to me, unless your willing to use one of the many input mask libraries available out there.

One caveat to consider though, that your code doesn't yet account for, is users pasting in or dragging and dropping in invalid characters. Also, don't forget to consider multiple decimal points, or locales that use the comma as the decimal place indicator.

You might also consider scientific exponential notation, thousands separators, leading plus signs, negativity indicated with parentheses instead of the hyphen, other number systems such as hexadecimal, etc... as you feel appropriate.

Community · Accepted Answer · 2017-05-23 12:30:07Z

I found my answer in below post

Disable Text Entry in <input type="number">

Modified for max length

$(document).on('keyup','#divid table tbody tr td input', function () { // Remove invalid characters var sanitized = $(this).val().replace(/[^-.0-9]/g, ''); // Remove non-leading minus signs sanitized = sanitized.replace(/(.)-+/g, '$1'); // Remove the first point if there is more than one sanitized = sanitized.replace(/\.(?=.*\.)/g, ''); // Update value $(this).val(sanitized); if(sanitized.indexOf(".")!= -1 && sanitized.indexOf("-")!= -1) { $(this).attr("maxlength","13"); } else if(sanitized.indexOf(".")!= -1) { $(this).attr("maxlength","12"); } else if(sanitized.indexOf("-")!= -1) { $(this).attr("maxlength","12"); } else { $(this).attr("maxlength","11"); } });

Collectives™ on Stack Overflow

Input text box as positive/negative/floating number with max length 11

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related