0

Is there a better way to make sure max length is adhered too? I've noticed that the maxlength and even max value attributes do not work in all browsers for some of the html5 input types:

This is how I would do it to make sure it works, but is there a cleaner alternative?

javascript/jquery:

 var checkLength = function(element, maxlength) {
     elementValue = $(element).val();
     if($(element).val().length > maxlength) {
         $(element).val(elementValue.substr(0, maxlength));
     };
 }

html:

 <input name="myNumberField" id="myNumberField" type="tel" onKeyUp="checkLength(this, 5);" />

Any ideas on this one?

Bret Thomas
  • 327
  • 2
  • 5
  • 16
  • 3
    Which browsers have you found `maxlength` doesn't work in? – Matt Feb 11 '14 at 15:53
  • you can try my solution for textarea's: http://stackoverflow.com/questions/4459610/set-maxlength-in-html-textarea/19316859#19316859 – smnbbrv Feb 11 '14 at 15:53
  • i don't have a list but we've noticed on an iphone that mobile safari will not use mexlength for limiting the number input type nor does it seem to care about the min and max attributes. – Bret Thomas Feb 11 '14 at 16:08

2 Answers2

0

jquery has a form validation plugin that can handle this. It even tells the user when they've entered too many or too few characters. The code looks something like this:

$("#"+formname).validate({
    rules: {
        myNumberField: {
            required: true,
            minlength: 4,
            maxlength: 50
        },
        // etc
    }
});
DiMono
  • 3,308
  • 2
  • 19
  • 40
0

/*Edit :

You can do something like that :

$("input").keypress(function(e) {
    if($(this).val().length > 30) {
         e.stopPropagation(); //or e.preventDefaut(); don't remember
    }
});

But you have to control this with server side after that ;)

Edit*/

There are 2 mains solutions :

The pure HTML one :

<input type="text" id="Textbox" name="Textbox" maxlength="10" />

The javascript one (attach it to a onKey Event) :

function limitText(limitField, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } 
}

But anyway, there is no good solution. You can not adapt to every client's bad HTML implementation, it's an impossible fight to win. That's why it's far better to check it on the server side, with a PHP / Python / whatever script.

check this topic

Community
  • 1
  • 1
Clément Andraud
  • 9,103
  • 25
  • 80
  • 158
  • You mean to say that maxlength validation should also be done from server side. Can you imagine number of call that would be made for every onchange and keyups. – Milind Anantwar Feb 11 '14 at 15:59
  • Don't forget the `paste` event . . . a right-click or browser menu "Paste" will get around a JS, "key-based" validations. – talemyn Feb 11 '14 at 16:01
  • @MilindAnantwar - He means, once the value is submitted, do another check of the length, to be sure that the value complies. For the most part, it's a **really** bad idea to rely on front-end validation as your only validation . . . it's way to easy to circumvent. – talemyn Feb 11 '14 at 16:03
  • Yes, you can check the maxlength with javascript, but the only good way is to check in server side, with php or other ;) – Clément Andraud Feb 11 '14 at 16:04
  • I do check server side as well, I'm just surprised there isn't a more valid solution for this issue other than this given answer which is essentially how mine works. – Bret Thomas Feb 11 '14 at 16:10
  • You have all solutions on your topic ^^ – Clément Andraud Feb 11 '14 at 16:29
  • Check edit, it's a better way to do that with jquery ;) – Clément Andraud Feb 11 '14 at 16:33