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, Apr 29 '15 at 08:32
this is what is specified in req. user will not be able to enter — Akki619, Apr 29 '15 at 08: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, Apr 29 '15 at 08:35

score 1 · Answer 1 · answered Apr 29 '15 at 09:27

1

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/

answered Apr 29 '15 at 09:27

Rajeev Goel

1,395
8
8

score 0 · Answer 2 · answered Apr 29 '15 at 08:43

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.

score 0 · Answer 3 · edited May 23 '17 at 12:30

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");
                }
           });

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

3 Answers3