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

Answer 1

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

Answer 2

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