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

Question

I have my form as below

<div id="new_image" title="Add Image">
    <form id="new_image_form" action="/reg_new_img" method="POST" enctype="multipart/form-data">
        <table width="0" border="0" cellspacing="0" cellpadding="6" class="table100">
<span class="astrix"></span>

            <tr>
                <td class="td30">Description of the Image:</td>
                <td>
                    <input name="desc" type="text" value="" />
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input id="atag" type="hidden" name="atag" value="">
                    </textarea>
                </td>
            </tr>
            <tr>
                <tr>
                    <td>Files / Image:
                        <p class="text5">X-ray / Site / Document / Agreement etc.</p>
                    </td>
                    <td>
                        <input name="image" type="file">
                    </td>
                </tr>
        </table>
    </form>
</div>

the script is as below.

$(document).ready(function () {

    $("#new_image").dialog({
        height: $("#new_image").height() + 150,
        width: $("#new_image").width() - 450,
        modal: true,
        autoOpen: false,
        show: {
            effect: "fade",
            duration: 200
        },
        hide: {
            effect: "fade",
            duration: 200
        },

        buttons: {
            "Submit": function () {
                $("#new_image_form").submit();
            },
                "Close": function () {
                $('#new_image').dialog("close");
            }
        }
    });

    $('#new_image_form').validate({
        rules: {
            desc: {
                required: true,
                minlength: 10
            },
            image: {
                required: true,
                accept: "image/*"
            }
        },
        messages: {
            image: {
                required: "only Image files accepted",
                accept: "Please upload only image",
            },
        },
        submitHandler: function (form) {
            $('#new_image_form').ajaxSubmit({
                success: function (data) {
                    console.log(data);
                    $('#new_image').dialog("close");
                    $(':input', '#new_image_form')
                        .not(':button, :submit, :reset, :hidden')
                        .val('')
                        .removeAttr('checked')
                        .removeAttr('selected');
                }
            });
            parse_patients();
        }
    });
    $('#new_image').dialog("open");
});

I have this code on js fiddle

http://jsfiddle.net/rakeshpatil1983/ctL7q/

I'm getting an error when i click submit when I actually put image file on the chrome browser console

Uncaught TypeError: Cannot call method 'call' of undefined

I'm not able to fix this. This code seems to work in some other page.

You'll need to also include the additional-methods.js file if you want to use the accept rule. — Sparky
– Sparky, Commented May 31, 2013 at 14:43

Community · Accepted Answer · 2017-05-23 10:27:56Z

11

In your rules for #new_image_form, "accept" is not a default jQuery Validator default rule. You must either use one of these default rules: Jquery Validate - List of Classes or define your own custom rule like such: jQuery Validate Plugin - How to create a simple custom rule?

EDIT: from comments below: there is a rule called accept that is part of the jQuery Validate plugin package. You simply have to include the additional-methods file in order to use it.

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered May 31, 2013 at 0:12

755

3,1214 gold badges24 silver badges38 bronze badges

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

3 Comments

755 Over a year ago

And the reason you are getting "cannot call 'call' on undefined" is that jQuery is looking for a method called "accept", not finding one (returning undefined), and then trying to call the method (which is undefined).

politus Over a year ago

the accept method is in additional-methods.js github.com/jzaefferer/jquery-validation/blob/master/…

Sparky Over a year ago

This answer is off the mark... there is a rule called accept that is part of the jQuery Validate plugin package. You simply have to include the additional-methods file in order to use it.

Qin Wang · Accepted Answer · 2013-11-01 10:48:21Z

-1

//Add New Validator Rule
jQuery.validator.addMethod("accept", function(value, element, param)
{
    return value.match(new RegExp("^" + param + "$"));
});

I had similar problem, which 'accept' rule was forgot to declared in the beginning.

then 'Uncaught TypeError: Cannot call method 'call' of undefined' disappeared.

answered Nov 1, 2013 at 10:48

Qin Wang

4224 silver badges12 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related