2

I want maxLength Validation in in HTML5.

I tried like this

<input type="number" name="trainer_mobile_no[]" maxlength="10" class="form-control" required="required"/>
Dhyey Pathak
  • 29
  • 1
  • 1
  • 5
  • 3
    Possible duplicate of [How can I limit possible inputs in a HTML5 "number" element?](https://stackoverflow.com/questions/8354975/how-can-i-limit-possible-inputs-in-a-html5-number-element) – Arjan Knol Jul 05 '17 at 10:13

6 Answers6

1

You cannot set max length but max value for number input type something like this:

 <input type="number" min="0" max="100">
J. Bajic
  • 56
  • 6
1

You cannot set maxlength attr for number type, you can achieve this by returning keypress event false in jQuery.

$(document).ready(function () {
  //called when key is pressed in textbox
  $("#quantity").keypress(function (e) {
     
     var maxlengthNumber = parseInt($('#quantity').attr('maxlength'));
     var inputValueLength = $('#quantity').val().length + 1;
     if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
        
               return false;
    }
    if(maxlengthNumber < inputValueLength) {
     return false;
    }
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


Number : <input maxlength="8" type="number" name="quantity" id="quantity" />
shathis jayakumar
  • 11
  • 3
0

you can add a max attribute that will specify the highest possible number that you may insert

<input type="number" max="999" />

if you add both a max and a min value you can specify the range of allowed values:

<input type="number" min="1" max="999" />
Jason Delaney
  • 458
  • 8
  • 21
  • This is copied answer from [this](https://stackoverflow.com/questions/8354975/how-can-i-limit-possible-inputs-in-a-html5-number-element). – Jaydeep Mor Jul 05 '17 at 10:32
  • Im sorry @Jaydeep, I did not see in the question that he asked for a unique answer to the question did he say dont give me a solution that someone already taught of no he asked for a solution thats what I provided, IF IT'S NOT BROKEN DONT FIX IT – Jason Delaney Jul 05 '17 at 10:36
0

Use as

<input type="number" name="trainer_mobile_no[]" min="1" max="5" class="form-control" required="required">
Gyan
  • 498
  • 6
  • 10
0

There are two possibilities

<input type="number" min="1" max="999" />

and

if you want to check the length.

User will not be allowed to enter more than 4 digits 

<input type="number" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==5) return false;" />

Sample Code Given below.. run that

It will accept min 1 and max 999 numbers<br/>
<input type="number" min="1" max="999" />
<br/><br/>
and
<br/><br/>
if you want to check the length (max 5 is defined).<br/>
    <input type="number" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==5) return false;" />
Muhammad Tahir
  • 2,351
  • 29
  • 25
0

you can use javascript in oninput like this:

  <input type="number" name="contactNo" id="contactNo" class="form-control"  placeholder="Enter Contact No" aria-label="contactNo" aria-describedby="basic-addon2" maxlength="10" data-rule-maxlength="10" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength); this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
Nidhi Patel
  • 26
  • 5