Text inputs with maxlength not validating with jQuery Validate

Question

I'm stuck with a problem using jQuery Validate. The thing is I have a few textboxes with their maxlength attributes set. Although they are not required, they still fail to validate when either empty or whitespace.

Sample HTML:

<input type="textbox" id="tbx1" maxlength="100" value="" />

Then, $('#tbx1').valid() returns false. Shouldn't it return true instead? Are there any known workarounds for this?

Oh, and adding $('#myform').validate({ ignore: '#tbx1' }); doesn't quite work for me, because I'm using ASP.NET controls with their automatic IDs. I know I could either use the control's client id or something like Wilco's IDOverride, but this is just not what I prefer.

So, anyone? Thanks!

is the textbox a required field? I think the validate plugin trims whitespace, so if the box is blank or just spaces & required it won't validate. — JKirchartz, Aug 01 '10 at 13:04
@JKirchartz that's the point. the field is not required. I don't know if it's a bug or by design, but I'd like to find a workaround for this — rdumont, Aug 01 '10 at 20:58
This has to be a bug. I am suffering with the same thing. You have a field which is NOT required, but simply give it a maxlength and suddenly the jquery validate plugin thinks it fails validation. 100% bug. The other tell tale sign is that it doesn't even raise an error for the field. So something is definitely busted up in there. Frustrating because I need to put maxlength limits on my fields! — Aaron, Sep 03 '10 at 00:33
Yup, this is a bug for sure. So, since my app will only be ready in three months, until then i'll just take the maxlength off and hope for a fix in the next update. — rdumont, Jan 08 '11 at 20:19
I just wanted to confirm that with jQuery 1.5 and jQuery Validate 1.7, I'm having the same problem. ASP.NET elements with MaxLength fail to validate, when I have not set them to be required. — Zachary, Feb 15 '11 at 04:24
use ignore option. declare $("form").validate({ingore: ".ignore"}) and add class="ignore" to your input. — Jules, Feb 16 '11 at 03:02
Yep - this is annoying - can't believe this hasn't been fixed — sydneyos, Feb 22 '11 at 19:51
Note that, as discussed in the bug link in Bruno's answer, the error occurs only with $(someElements).valid() - the validation that occurs during a form submit does not complain about these fields! Also, they are not marked as having an error, in my experience. Definitely a bug in validate plugin. — Adam, Feb 28 '12 at 08:16
you can see all every model with best sample jquery validation online at below address : http://www.position-relative.net/creation/formValidator/demos/demoValidators.html — Harry Sarshogh, Jul 04 '13 at 05:39

score 19 · Answer 1 · edited Jul 08 '13 at 18:05

19

This seems to be a bug in this plugin. If fixed it by replacing the method by a custom implementation using the following code:

$.validator.addMethod("maxlength", function (value, element, len) {
   return value == "" || value.length <= len;
});

edited Jul 08 '13 at 18:05

Sparky

98,165
25
199
285

answered Sep 30 '11 at 12:42

Bruno

1,213
13
14

1

This worked better for me than setting a new name for my new method. I had set the maxlength attribute on the input field, I had not attempted to validate against it. At one level I don't feel the need to validate against it - the browser ensures that you cannot add more than the specified number of characters, so I really can't see how the validation could fail? But, no harm in validating as long as the validation works. :) – Adam Feb 28 '12 at 08:14
1

THANK YOU!! that bug cost me a few hours! it is beyond me how this can still be an issue after 2 years – black666 Aug 16 '12 at 09:01
This is useful to have since the browser's "maxlength" check doesn't always account for newlines. As described [here](http://stackoverflow.com/questions/10030921/chrome-counts-characters-wrong-in-textarea-with-maxlength-attribute). – Peter Nov 06 '15 at 22:30
1

Validate looks for the **name of the input field** check [this](http://stackoverflow.com/questions/14404884/jquery-validate-minlength-rule-is-not-working) solution. Hope helps. – Shaiju T Oct 01 '16 at 16:41

score 3 · Answer 2 · answered Aug 25 '11 at 15:47

Ran into this problem myself on some complex forms I was writing...

My solution is just to create my own maxlength method that I can 'maxLen' that works almost exactly like the default method just under a different name. Just paste this above your main validate call ($("#mainform").validate({}); or whatever your form is called).

//Custom Max Length Validation
jQuery.validator.addMethod("maxLen", function (value, element, param) {
    //console.log('element= ' + $(element).attr('name') + ' param= ' + param )
    if ($(element).val().length > param) {
        return false;
    } else {
        return true;
    }
}, "You have reached the maximum number of characters allowed for this field.");

Once you've done that you can add the rule like so:

 rules: {
       Message: {
            required: false,
            maxLen: 200
        }
 }

score 0 · Answer 3 · answered Mar 14 '11 at 15:39

0

First, I assume that the input has a "name" attribute and is simply not shown in your example? If not, try that and it may fix the issue.

Second, have you tried explicitly setting the field to be not required but to have a maxlength in the validator object? For instance:

var rules = {
  'txtbx1': {
    required: false,
    maxlength: '100'
  }
};

$('#formId').validate({rules:rules});

answered Mar 14 '11 at 15:39

Philip Schweiger

2,714
1
18
27

Thank you for your answer, Philip, but this doesn't solve the issue. I had actually forgotten about this question, since it has been unanimously declared as a bug. My input did not have a name attribute, since it was not needed in that context. Also, as I stated in the question, I was looking for a solution that wouldn't require `$('#formId').validate(...);` – rdumont Mar 15 '11 at 04:03

Text inputs with maxlength not validating with jQuery Validate

3 Answers3