9

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!

9
  • 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 1, 2010 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 1, 2010 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 3, 2010 at 0: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 8, 2011 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, 2011 at 4:24

3 Answers 3

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;
});
4
  • 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, 2012 at 8: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, 2012 at 9:01
  • This is useful to have since the browser's "maxlength" check doesn't always account for newlines. As described here.
    – Peter
    Nov 6, 2015 at 22:30
  • 1
    Validate looks for the name of the input field check this solution. Hope helps.
    – Shaiju T
    Oct 1, 2016 at 16:41
3

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
        }
 }
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});
1
  • 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, 2011 at 4:03

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.