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
– Sparky, Commented Sep 23, 2013 at 14:31
@Sparky I have edited my question providing the code. HTML for the Type is simple html select with runat=server — hima
– hima, Commented Sep 23, 2013 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
– Sparky, Commented Sep 23, 2013 at 15:08

Sparky · Accepted Answer · 2013-09-23 15:17:37Z

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, 2013 at 15:17

answered Sep 23, 2013 at 15:04

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

hima Over a year ago

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

Sparky Over a year ago

@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.

hima Over a year ago

this is my html code:

<select id="Type" runat="server" class="InputText" onchange="EnableShipment();">                                                                <option value="-1">--Select--</option>                                                                <option value="Home3">Home 3 Monthly</option></select>

Sparky Over a year ago

@hima... as previously requested, edit the rendered HTML code into your OP. And without a name attribute, the plugin will not operate properly: jsfiddle.net/hmBjY

hima Over a year ago

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 · Accepted Answer · 2013-09-30 10:37:02Z

-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, 2013 at 10:37

answered Sep 24, 2013 at 12:36

hima

6203 gold badges11 silver badges25 bronze badges

11 Comments

Sparky Over a year ago

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."

Sparky Over a year ago

See this jsFiddle which clearly shows that you cannot use id to declare rules within .validate(): jsfiddle.net/nMwqp

Sparky Over a year ago

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: jsfiddle.net/DgMgf

Sparky Over a year ago

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: jsfiddle.net/QhasW

hima Over a year ago

@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.

|

Collectives™ on Stack Overflow

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

2 Answers 2

9 Comments

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related