使用提交处理程序的jQuery ajax函数中的类型错误 [英] Type Error in Jquery ajax function using submit handler

问题描述

我正在使用jquery validate插件验证文本框，但是当我提交按钮时，它没有验证.它在萤火虫中的Submit Handler处显示错误:

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:

错误

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

代码

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

推荐答案

您遇到了很多问题...

You have a bunch of issues...

1)您完全没有在jsFiddle中包含jQuery Validate插件，并且如果您的注释正确，则不能在插件之后 包含jQuery. jQuery先包含 ，然后包含所有jQuery插件.

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)您的ID选择器错误.在<form>标记中，您具有id="form1"，但是在jQuery选择器中，您具有#Form1.这是区分大小写的.

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)jQuery validate插件要求输入必须具有唯一的name属性.您根本没有任何name属性.这将成为比赛的制胜法宝.如果每个要验证的input元素都没有name属性，则该插件将无法工作.

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)messages选项的拼写为"messages".您将其拼写为"message".

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

5)您不需要按钮上的嵌入式点击处理程序.只需将其设置为type="submit"并允许插件自动处理即可.这意味着您无需将.validate()包装在另一个函数中.只需将其放入DOM ready事件处理程序中，即可在页面加载后立即设置并准备好表单.

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.

这使您更加接近: http://jsfiddle.net/dxEEe/2/

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

基于通信网络的

要通过单击type="button"进行提交，只需要click处理程序即可捕获按钮.

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

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

或

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

尽管，我不明白这一点，因为最终，click处理程序中唯一的东西是submit.换句话说，只需使用type="submit"按钮将具有完全相同的功能，而无需任何click处理程序功能.

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.

(在您的jsFiddle 中，"function"被拼写为"functioin".我想您只是需要放慢速度，因为许多问题与拼写有关.)

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

这篇关于使用提交处理程序的jQuery ajax函数中的类型错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！