Uncaught TypeError: Cannot call method 'addMethod' of undefined in jquery validate

Question

Hi I am using jQuery JavaScript Library v1.10.2 and jQuery Validation Plugin 1.11.1 and get the above error. Code

$.validator.addMethod("fnType", function (value, element) {
    if (element.value == "-1") { return false; } else {return true;}
}, "Please select Type");

The rest of the code is for jquery validation. The above code is inside $(document).ready and within that inside $("#button").click.

Note: I was using jQuery JavaScript Library v1.4.4 earlier and upgraded to these versions to use jquery validate. I am stuck with this from morning. Please help/advise.

EDIT: Here is the complete code

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

    $("#ctl00_MainContentHolder_SubmitButton").click(function () {
        ValidatePage();
        if ($("#aspnetForm").valid()) {
            if (FormValidation()) {
                __doPostBack("Submit", "");
            }
        }
    });
});

function ValidatePage() {
    $.validator.addMethod("fnType", function (value, element) {
        if (element.value == "-1") { return false; } else {return true;}
    }, "Please select Type");

    $("#aspnetForm").validate({
        ignore:":hidden",
        rules: 
        {
            <%=Type.UniqueID %>: { required: true, fnType:true },
        }, 
        messages: 
        {
            <%=Type.UniqueID %>:{ required: "Type is required" },
        },
        errorPlacement: function(error, element) {
           error.appendTo('#ctl00_MainContentHolder_errorLabelTop');
        },
        wrapper: 'li'
    });
}

In the master page I have these in the same order

<script type="text/javascript" src="../Script/JQuery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../Script/JQuery/jquery.validate.js"></script>    
<script type="text/javascript" src="../Script/CustomScript/CustomScript.js"></script>

EDIT: Here is the HTML code

<table>
    <tr>
        <td colspan="2">
            <label id="errorLabelTop" runat="server" class="ResponseText"></label>
        </td>
    </tr>
    <tr>
        <td style="width:130px;">
            Scheme Type<span class="RedMainText" style="font-size:12px;"><sup>*</sup></span>
        </td>
        <td>
            <select id="schemeType" runat="server" class="InputText" >
            <option value="-1">--Select--</option>
            <option value="Home3">Home 3 Monthly</option>
            <option value="Home6">Home 6 Monthly</option>
            <option value="Practice3">Practice 3 Monthly</option>
            <option value="Practice6">Practice 6 Monthly</option>
            </select>
        </td>
    </tr>
</table>

Show the complete JavaScript code as well as the HTML markup. — Sparky, Sep 23 '13 at 14:31
@Sparky I have edited my question providing the code. HTML for the `Type` is simple html select with `runat=server` — hima, Sep 23 '13 at 14:53
If the _rendered_ HTML is that simple, then it would be no trouble for you to actually show it. (It's relevant to how you assign the rules.) — Sparky, Sep 23 '13 at 15:08

Sparky · Answer 1 · 2013-09-23T15:17:37.383

4

Your code:

rules: {
    <%=Type.UniqueID %>: { required: true, fnType:true },
}

You cannot assign rules to the id of the input. You must assign them only using the name attribute. Also, remove any trailing commas if you want this to work in older versions of IE.

rules: {
    myField: {
        required: true,
        fnType: true 
    }
}

HTML:

<input name="myField" ...

Demo that shows the validation plugin will not work with id: http://jsfiddle.net/hmBjY/

Demo that shows the validation plugin working with name: http://jsfiddle.net/NKCg9/1/

Also, your code:

function ValidatePage() {

    $.validator.addMethod( ....

    $("#aspnetForm").validate({ ....

These methods do not go inside a function or a click handler for repeated calls. The click is automatically captured by the plugin. These methods are only used for initialization so you call them once in the DOM ready event handler...

$(document).ready(function() {

    $.validator.addMethod( ....

    $("#aspnetForm").validate({ ....

edited Sep 23 '13 at 15:17

answered Sep 23 '13 at 15:04

Sparky

98,165
25
199
285

Sorry about the trailing commas my mistake it is not in the original code. But I am surprised to know that, rules cannot be applied to id of the input because I have similar bit working in other pages – hima Sep 23 '13 at 15:08
@hima, The jQuery Validate plugin can be assigned rules in many different ways, so perhaps you've also used inline HTML5 validation, which it can pick up. Since you've refused to show your _rendered_ HTML, I have no idea. – Sparky Sep 23 '13 at 15:10
this is my html code: `` – hima Sep 23 '13 at 15:12
@hima... as previously requested, edit the _rendered_ HTML code into your OP. And without a `name` attribute, the plugin **will not** operate properly: http://jsfiddle.net/hmBjY/ – Sparky Sep 23 '13 at 15:13
I can see that it is not working in jsfiddle you ahve provided, but I have code working with only the id. I never give name to html/asp .net controls and till now everything seems to work fine. – hima Sep 23 '13 at 15:51
@hima, that is impossible as proven by [my jsFiddle](http://jsfiddle.net/hmBjY/). However, there are isolated cases where you can assign a rule (using other methods) to a field without a `name`, but that breaks when there's more than one field. See broken: http://jsfiddle.net/hmBjY/2/ – Sparky Sep 23 '13 at 16:05
thanks a ton for the useful input. Still my code works but the problem is with jquery files. I have a datepicker and the related files in the same page so there is a conflict in js files. I will upgrade all the files to latest versions and give a try. Thank you once again. – hima Sep 24 '13 at 09:40
as suspected the js files were causing the problem and there was no problem with referring the ids of elements. Thank you for your help – hima Sep 24 '13 at 12:38
@hima, if you'd simply show your HTML, I can demonstrate why you only _think_ declaring rules by `id` is no problem. – Sparky Sep 24 '13 at 16:52

hima · Answer 2 · 2013-09-30T10:37:02.343

-2

Apparently I found out what was causing the problem after banging my head for a day on and off. I have jquery Datepicker in my webpage and I was using jquery-ui js/css v1.8.6 while the jquery file was v1.10.2. This resulted in conflict and after upgrading jquery-ui to v1.10.3 the above mentioned error no longer existed. This means that there was no error in the code. And another important thing to note is that, name attribute is a must for the elements for jquery validation.But it appears that for elements with runat="server", their id can be used in this manner <%=yourid.UniqueID%> in jquery validation. All this is happening in master page and content page case.

thank you for all the useful contributions in the form of comments and answers.

edited Sep 30 '13 at 10:37

answered Sep 24 '13 at 12:36

hima

610
3
10
24

**Reader beware**: This answer contains serious misinformation. You absolutely **cannot** _"safely refer to id of the element"_ in jQuery Validation's `.validate()` method. ~ [As per documentation: _"The name attribute is 'required' for input elements, the validation plugin doesn't work without it."_](http://jqueryvalidation.org/reference/) – Sparky Sep 24 '13 at 17:05
See this jsFiddle which clearly shows that you cannot use `id` to declare rules within `.validate()`: http://jsfiddle.net/nMwqp – Sparky Sep 24 '13 at 17:06
See this jsFiddle which demonstrates what the OP is likely observing on his page. Notice that validation is broken on all fields except the first: http://jsfiddle.net/DgMgf – Sparky Sep 24 '13 at 17:07
If you need to declare rules by `id`, there are other methods, but you still **must** have a unique `name` attribute on every element. See: http://jsfiddle.net/QhasW/ – Sparky Sep 24 '13 at 17:07
@Sparky I still agree with all your jsfiddle examples but I have to say I have code working with only id. Might be the master pages that is making it work. How can I reproduce master page scenario in jsfiddle. the above posted code is the exact code I have in my page with the same id. I have edited my question to show html code. – hima Sep 25 '13 at 09:50
If you still don't believe it, try adding more than one field to the form and tell me if it still works. [I guess not](http://stackoverflow.com/q/19003870/594235). – Sparky Sep 25 '13 at 15:07
@Sparky for your information I have 20+ fields in one page and none of them have name other than the ones with no `runat=server`. – hima Sep 25 '13 at 15:12
If it's all working so well without `name` attributes, then why did you accept this answer? http://stackoverflow.com/q/19003870/594235 – Sparky Sep 25 '13 at 15:15
I hope you realize that your _rendered_ HTML code is not the same as the code you've uploaded to your server. The plugin only "sees" the _rendered_ HTML as it appears in the browser. – Sparky Sep 25 '13 at 15:26
@Sparky please read my comment above(5th comment). It is in the master page. how can I reproduce master page? And after seeking answer here `http://stackoverflow.com/questions/19003870/how-to-refer-html-element-in-jquery-validation-in-content-page` I realised that client side fields always need name attribute but server side fields can do without name. I accepted the answer because it solved my problem which is why SO is for – hima Sep 25 '13 at 15:29
Server-side code means absolutely **nothing** to JavaScript because JavaScript is **client**-side code. That's why I repeatedly asked you to "show the ***rendered*** HTML markup". – Sparky Sep 25 '13 at 15:33

Uncaught TypeError: Cannot call method 'addMethod' of undefined in jquery validate

2 Answers2

Linked