Uncaught TypeError: Cannot read property 'settings' of undefined jquery validation 1.13.0

[svogt0511]

Pretty simple, I comment out my validate call in document ready and the error goes away.

The error occurs when I click on certain for elements. Even if this is not a validate bug, I am having a hard time debugging.

$(document).ready(function(){
...

// validate main form
$('#case_form').validate({
debug: true,
rules: {
phone: {
phoneUS: true,
required: true
},
model: {
required: false
},
serial_number: {
required: true
},
client_group_id: {
required: true
},
description: {
required: true
},
backup_data: {
required: true
},
first_name: {
required: true
},
last_name: {
required: true
},
email: {
required: true,
email: true
},
department: {
required: function() {
return departmentRequired();
}
},
assigned_to: {
required: function() {
return assigneeRequired();
}
},
operating_system_id: {
required: true
},
warranty: {
required: true
}
},
messages: {
phone: '555-555-5555',
serial_number: 'X',
client_group_id: 'X',
description: 'X',
backup_data: 'X',
first_name: 'X',
last_name: 'X',
email: 'X',
department: 'X',
assigned_to: 'X',
operating_system_id: 'X',
warranty: 'X'
},
invalidHandler: function(form, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors === 1
? 'You missed 1 field.'
: 'You missed ' + errors + ' fields.';
displayMessage(message);
}
},
submitHandler: function(form) {
$('#main-bubble').spin({ lines: 12, length: 12, width: 4, radius: 12 });
$('#save_case_form').attr('disabled', 'disabled');
$('#save_case_form_and_return').attr('disabled', 'disabled');

        form.submit();
    }
});

...

});

[svogt0511]

Adding to my own thread...

I am debugging a very complicated page that somebody else wrote...

There seem to be a number of forms on this page. They are not nested. Jquery validate seems to be called for this form regardless of the fact that there is no validation specified for it. I am clicking on a field in the 2nd form (the one with no validation specified for it), and I get the "Uncaught TypeError: Cannot read property 'settings' of undefined'. This is line 360 of https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.js in the function delegate. the variable validator is undefined (of course because there was no validation specified for this form).

Any help with this will be greatly appreciated.

Thanks.

[svogt0511]

OK... moving right along here... again, adding to my own thread... I think I have a work-around. Any comments on this are still greatly appreciated because I think I still don't have a full understanding of everything that is going on here.

However, I think I have a viable work-around. If I add to my code:

$('#case_form').validate({

});

That fixes the errors being reported in the console when I click on fields in that form. However, there is at least one more form on the page that suffers from the same thing. I will use this work-around for that form, as well, and hope that it works and doesn't break anything else on this page.

Any comments?

Thanks.

[kafeltz]

Try to isolate the problem in another simple file and little by little you can make it work. I'm using this plugin and it's working fine.

[svogt0511]

Will do. It works fine for us, for the most part. This us the first problem I have seen with it and we use it A LOT.

[svogt0511]

I just tried it with your very own http://jqueryvalidation.org/files/demo/ page and it worked fine. I even pulled in the versions of jQuery and jQuery validate that I am using in my other form. I commented out the $("#commentForm").validate(); line in hopes of simulating what is going on in my form. No problem. Worked fine.

At least I have a workaround.

I will try a bit more to figure out what is going on. Any debugging suggestions would be greatly appreciated.

Thanks!

[kafeltz]

Just to note that jquery-validator is not mine. I'm just a user watching comments. =D

Well, did you try to remove these uppercase variable names from phoneUS to phone_us, or even yet, "phone_us". Just to check it.

[kafeltz]

I have just remember a case where I waste some time on it before realize the problem. Make sure that all your fields name matches the DOM (inputs) field names.

It happened to me this when I copied and pasted some code and jquery validator omitted some error and i could not find out what it was.

[jzaefferer]

Without a simplified testpage on jsfiddle or jsbin there's nothing I can do here.

[josencv]

I had a similar problem. I was trying to add a custom rule to a field via javascript, but it looks like the browser had unfinished tasks that were needed for the .rules() method to work properly.

To fix it i used the following snippet:

setTimeout(function() {
   $('#my_field').rules('add', { required: true })
}, 0);

This stackoverflow post explains why this works.

[jzaefferer]

@josencv thanks for chiming in, but commenting on closed issues without anything that reproduces the issue, its unlikely to make any difference.

[sunil20panchal]

Thanks its working fine @josencv...

[zhenglixuan]

I just meet this issue. I think it is because that form is created by js. So you need to reset the validate.
See the below code:
$('form').validate().resetForm();
$('form').validate();
It work to me.

[trungjc]

I got same issue, and found out that, the class name of form same with other element, so i rename class of form and it work