Type Error in Jquery ajax function using submit handler

Question

I am validating a text box using jquery validate plug-in, but when I submit the button it is not validating. It is showing an error at submit Handler in firebug:

Error

TypeError:$(...)validate is not a function

Code

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


    $("#form1").validate({

        rules: {

            txtName: {

                required: true

            }

        },

        message: {

            txtName: {

                required: "Field should not be empty"
            }

        },


        submitHandler: function (form) {

            var txtName = $("#txtName").val();
            var txtEmail = $("#txtEmail").val();
            var txtSurName = $("#txtSurName").val();
            var txtMobile = $("#txtMobile").val();
            var txtAddress = $("#txtAddress").val();

            $.ajax({
                type: "POST",
                url: location.pathname + "/saveData",
                data: "{Name:'" + txtName + "',SurName:'" + txtSurName + "',Email:'" + txtEmail + "',Mobile:'" + txtMobile + "',Address:'" + txtAddress + "'}",
                contentType: "application/json; charset=utf-8",
                datatype: "jsondata",
                async: "true",
                success: function (response) {

                    $(".errMsg ul").remove();
                    var myObject = eval('(' + response.d + ')');
                    if (myObject > 0) {
                        bindData();
                        $(".errMsg").append("<ul><li>Data saved successfully</li></ul>");
                    }
                    else {
                        $(".errMsg").append("<ul><li>Opppps something went wrong.</li></ul>");
                    }
                    $(".errMsg").show("slow");
                    clear();

                },
                error: function (response) {
                    alert(response.status + ' ' + response.statusText);
                }


            });


        }

    });

    $("#btnSave").click(function () {
        $("#form1").submit()

    });


});

}

I am calling this function in a button click. Please help me with this.

my design page of button fields is

Can I see the rest of the code, because this seems alright. You don't have a place where you call something like this: $("some-css-selector")validate instead of $("some-css-selector").validate ? — thetrompf
– thetrompf, Commented Mar 23, 2014 at 17:36
1) You have not included jQuery or the plugin properly, otherwise .validate() would be recognized. And 2) .validate() is the plugin's initialization method and therefore would not belong inside a function, saveData, that presumably gets triggered every time the submit button is clicked. Just put .validate() in your DOM ready event handler. — Sparky
– Sparky, Commented Mar 23, 2014 at 18:41
There is no jQuery Validate plugin included in your jsFiddle. — Sparky
– Sparky, Commented Mar 23, 2014 at 18:47

Sparky · Accepted Answer · 2014-03-24 16:19:19Z

0

You have a bunch of issues...

1) You are not including the jQuery Validate plugin at all in your jsFiddle and if your comments are correct, you cannot include jQuery after the plugins. jQuery gets included first, then any jQuery plugins.

2) Your ID selector is wrong. In your <form> tag, you have id="form1" but in your jQuery selector, you have #Form1. This is case-sensitive.

3) The jQuery validate plugin mandates that the inputs have unique name attributes. You don't have any name attributes at all. This is going to be a game-stopper. The plugin will not work without a name attribute on each input element to be validated.

4) The messages option is spelled "messages". You've misspelled it as "message".

5) You don't need an inline click handler on your button. Just make it a type="submit" and allow the plugin to handle it automatically. This means that you do not need to wrap .validate() inside another function. Just put it inside a DOM ready event handler so the form is setup and ready as soon as the page loads.

This one gets you closer: http://jsfiddle.net/dxEEe/2/

EDIT based on commnets:

To submit using the click of a type="button" would only require a click handler to capture the button.

$("#btnSave").click(function() {
    $("#form1").submit();
});

OR

$("#btnSave").on('click', function() {
    $("#form1").submit();
});

Although, I don't understand the point of this, as ultimately, the only thing inside your click handler is a submit. In other words, simply using a type="submit" button would have the exact same functionality without needing any click handler function.

(In your jsFiddle, "function" was misspelled as "functioin". I think you just need to slow down as many of your issues have to do with spelling.)

edited Mar 24, 2014 at 16:19

answered Mar 23, 2014 at 18:56

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

2 Comments

user3452210 Over a year ago

Thanks for the help!! But u have used type="submit" . I want to do validation on a button click , if i used the button click it is not working see this jsfiddle.net/dxEEe/33

Sparky Over a year ago

@user3452210, your problems seem to stem from a general carelessness. In the jQuery click handler in the last jsFiddle, you misspelled "function" as "functioin". Otherwise, it works: jsfiddle.net/dxEEe/40

thetrompf · Accepted Answer · 2014-03-23 17:05:24Z

0

It appears that you haven't loaded the jquery validation plugin. It tells you that there is no validate function on the jquery object.

answered Mar 23, 2014 at 17:05

thetrompf

4604 silver badges11 bronze badges

5 Comments

user3452210 Over a year ago

I have added "jquery.validate.js" "jquery.validate.min.js" plugins to my design page which is registration.aspx

thetrompf Over a year ago

you should not add both, .min.js is just a minified version of the other.

user3452210 Over a year ago

I tried with either one of them!! still nothing happend!!

Sparky Over a year ago

@user3452210, are you including jQuery BEFORE the jQuery Validate plugin?

Sparky Over a year ago

@user3452210, that's backwards! jQuery gets included first, then the plugins.

Collectives™ on Stack Overflow

Type Error in Jquery ajax function using submit handler

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related