1

I have an input box in a form and I want user to enter number only and maxlength of the number should be 10.

<input type="text" maxlength="10" ng-model="phoneNumber" class="form-control"/>

When I use the method above, I can restrict the user with 10 digit but user can enter letter.

<input type="number" ng-model="phoneNumber" class="form-control"/>

When I use the second method, user can only enter numbers but I cannot restrict to enter only 10 digits.

Instead of warning the user, is there any other option by which I can combine these two attribute?

Bilge Yücel
  • 37
  • 5
  • It's best to do any validations in the back-end (the user is always in control of the front-end) – Aleksey Solovey Jul 23 '18 at 12:27
  • As a rule of thumb, do data validation in terms of user experience on the front-end, and data validation in terms of security on the back end. Both layers involve validation, but different types. – Jimenemex Jul 23 '18 at 13:00

1 Answers1

1

Actually input type=number only handles and not allows user to submit the form if the entered number is not in range.

Please refer:

How can I limit possible inputs in a HTML5 "number" element?

More details:

maxlength ignored for input type="number" in Chrome

HTML5 input number min max not working with required

Ramesh Rajendran
  • 37,412
  • 45
  • 153
  • 234
  • OP asked to allow only 10 digit long numbers to be entered. With `max="99999"` (or `ng-maxlength="10"`) you can type as many as you like (_even though it's not validated_). – Aleksey Solovey Jul 23 '18 at 13:54
  • https://stackoverflow.com/questions/18510845/maxlength-ignored-for-input-type-number-in-chrome – sridhar.. Jul 23 '18 at 14:38
  • 1
    https://stackoverflow.com/questions/18510845/maxlength-ignored-for-input-type-number-in-chrome looks like this one works for me. Thanks! – Bilge Yücel Jul 24 '18 at 06:32