使用jQuery验证方法验证表单时收到的错误

Question

当我试图简单地验证一个表单时，我会得到下面的图像错误。在我看来，这个错误听起来像是在我们使用的cdn版本的jQuery中找不到验证插件(JQuery)。

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>

下面是我在JS中使用的验证代码：

$('#btnSPAcceptShippingReq').on('click', function (e)
    {
        $("#form1").validate({
            rules: {
                txtSPStatusComments: {
                    required: true
                }
            },
            messages: {
                txtSPStatusComments: {
                    required: "Status is a required field!"
                }
            },
            highlight: function (e)
            {
                $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
            },

            success: function (e)
            {
                $(e).closest('.form-group').removeClass('has-error').addClass('has-info');
                $(e).remove();
            },

            errorPlacement: function (error, element)
            {
                error.insertAfter(element.parent());
            }
        });

如何在我的项目中包含这个简单的插件？

​

​

编辑

jQuery JS验证

$("#form1").validate({
        rules: {
            txtSPStatusComments: {
                required: true
            }
        },
        messages: {
            txtSPStatusComments: {
               required: "Status is a required field!"
            }
        },
        highlight: function (e)
        {
            $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
        },

        success: function (e)
        {
            $(e).closest('.form-group').removeClass('has-error').addClass('has-info');
            $(e).remove();
        },

        errorPlacement: function (error, element)
        {
            error.insertAfter(element.parent());
        }
    });

编辑#2

正如我前面提到的，我认为jQuery验证插件不适用于引导，因为jQuery插件似乎需要"input type=“submit，而引导则需要以下内容(”按钮type=“submit)。如果我将HTML中的“按钮类型”更改为“输入类型”，则引导程序不会接受这一点。

<button type="submit" id="btnSPAcceptShippingReq" class="btn btn-primary">Accept</button>

但是，如果我将jsFiddle中的HTML更改为下面的内容，它仍然有效。所以，当我点击提交按钮时，我不知道我缺少什么关于验证没有触发.

<button type="submit" />

注意，在调试过程中，我do看到JS代码被击中和初始化。

请注意，我无法像下面的链接: bootstrapValidator所解释的那样使引导Validator提交表单，即使存在验证错误工作。

如果有人能帮我解决这个问题，我会非常感激的。

下面是代码：

HTML MasterPage

    <!-- page specific plugin styles -->
    <link rel="stylesheet" href="../Content/assets/css/jquery-ui.min.css" />
    <link rel="stylesheet" href="../Content/assets/css/datepicker.css" />
    <link rel="stylesheet" href="../Content/assets/css/ui.jqgrid.css" />

    <script src="../Scripts/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
    <script src="../Scripts/knockout-3.1.0.debug.js"></script>
    <script src="../Content/lib/assets/js/bootstrap.min.js"></script>
    <script src="../Content/lib/assets/js/bootbox3/bootbox.min.js"></script>
    <script src="../Scripts/modernizr-2.6.2.min.js"></script>
    <script src="../Content/lib/assets/js/jquery.validate.min.js"></script>
    <script src="../Content/lib/assets/js/bootstrapValidator/bootstrapValidator.min.js"></script>

    <%--<script src="Scripts/jquery.jqGrid.min.js"></script>--%>
    <script src="../Scripts/modernizr-2.6.2.min.js"></script>
    <script src="../Content/lib/assets/js/jquery.jqGrid.min.js"></script>
    <script src="../Scripts/json2.min.js"></script>
    <script src="../Content/lib/assets/js/bootstrap-datepicker.min.js"></script>


    <script src="../Scripts/Common.js"></script>
    <script src="../Scripts/DataServices/CreditSourceDocs.js"></script>
    <script src="../Scripts/DataServices/StopPenalize.js"></script>
    <script src="../Scripts/DataServices/PISIQueue.js"></script>
    <script src="../Scripts/DataServices/BalanceReview.js"></script>

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>

<body class="no-skin">
    <form id="form1" runat="server" data-toggle="validator" class="form-horizontal" role="form">

HTML ChildPage

<div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                                        <h4 class="modal-title" id="btnSPStopGrid-label">Stop Parts Shipping Request</h4>
                                                    </div>
                                                    <div class="modal-body">
                                                        <div class='form-group'>
                                                            <span class="label label-default col-sm-7 col-sm-offset-2">Enter the reason and comments to stop the Shipping Request</span>
                                                            <br />
                                                            <label class="required col-sm-1 control-label" for="txtSPStatusComments">Status Comments:</label>
                                                            <div class="col-sm-9 col-sm-offset-1">
                                                                <textarea id="txtSPStatusComments" name="txtSPStatusComments" rows="5" cols="80" class="form-control height-auto" placeholder="Enter Comments"></textarea>
                                                            </div>
                                                            <div class="hide-text">
                                                                <input type="hidden" id="txtSPStopGridID" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="submit" id="btnSPAcceptShippingReq" class="btn btn-primary">Accept</button>
                                                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                                    </div>
                                                </div>
                                            </div>

JS

$("#form1").validate({
        rules: {
            txtSPStatusComments: {
                required: true
            }
        },
        messages: {
            txtSPStatusComments: {
                required: "Status is a required field!"
            }
        },
        highlight: function (e)
        {
            $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
        },
        unhighlight: function (e)
        {
            $(e).closest('.form-group').removeClass('has-error').addClass('has-info');
        },
        errorPlacement: function (error, element)
        {
            error.insertAfter(element.parent());
        }
    });

Answer 1

Quote OP

"...sounds和验证插件(jquery.validate.min.js)一样，在我们使用的cdn版本的jQuery中找不到。“

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>

根本的问题是而不是“CDN版本的jQuery”.这是jQuery UI的CDN版本，无论是jQuery还是jQuery UI都不会有jQuery验证插件；jQueryE 216也不会在E 117jQuery UI<代码>E 218中。

jQuery和jQuery验证插件是您需要在jQuery UI中单独包含的两件事。请参阅此页上的CDN链接，用于jQuery Validate插件和jQuery本身的此页。只需记住在j、、查询、UI、和任何其他jQuery插件之前包括jQuery。(jQuery UI被认为是一个jQuery插件)。

其次，.validate()方法用于初始化表单上的插件，因此将其放入click处理程序中是没有意义的。初始化后，只要单击来自type="submit" input或button，该插件就会自动捕获click事件。

由于您使用的是highlight，您也应该使用unhighlight来代替success.

highlight: function (e) {
    $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
},
unhighlight: function (e) {  // opposite of highlight
    $(e).closest('.form-group').removeClass('has-error').addClass('has-info');
}

您也不需要$(e).remove()，因为插件会自动删除错误消息。

基于注释的编辑：

包括jQuery，然后是任何jQuery插件，然后是jQuery/JavaScript代码，包括对.validate()的调用.这可以在<head></head>区或<body></body>区的任何地方.通常在最后。

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {  // ensure DOM is ready

        $("#form1").validate({  // initialize validate plugin
            ....
        });

    });
</script>

基于编辑的编辑.

Quote OP:

正如我前面提到的，我认为jQuery验证插件不适用于引导，因为jQuery插件似乎需要“输入type=”提交，而引导则需要以下内容(“按钮type=”submit)。如果我将HTML中的“按钮类型”更改为“输入类型”，则引导程序不会接受这一点。

• jQuery引导和jQuery引导Validator插件是两种不同的东西。要使用Bootstrap Validator插件，意味着您还需要使用Bootstrap。请更多地注意您试图使用的插件和技术，以及它们各自的依赖关系。
• 您不会同时使用jQuery验证和jQuery引导Validator插件。挑一个然后坚持下去。您不能为一个插件编写代码，然后期望它与一个完全不同的插件一样工作。
• jQuery验证插件在jQuery引导上工作得很好。请参阅：http://jsfiddle.net/dnfwq6bg/
• 只要包含jQuery，<button>或<input>的验证插件就能很好地工作。请参阅：http://jsfiddle.net/dnfwq6bg/1/