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

时间：2014-12-04 20:07:31

标签： jquery jquery-validate

我在尝试简单验证表单时遇到以下图像错误。我的错误听起来像在我们正在使用的jQuery的cdn版本中找不到验证插件（jquery.validate.min.js）。

<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());
            }
        });

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

enter image description here

修改

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 validate插件适用于bootstrap，因为似乎jQuery插件需要＆＃34; 输入类型=＆＃34;提交＆ ＃34;而bootstrap需要以下（＆＃34;按钮类型=＆＃34;提交＆＃34;）。 如果我更改＆＃34;按钮类型＆＃34;到＆＃34;输入类型＆＃34;在HTML中，bootstrap不接受这个。

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

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

<button type="submit" />

请注意，在调试时，我执行会看到JS Validator代码被点击并初始化。

请注意，我无法按照此链接中的说明启动bootstrapValidator： Bootstrap Validator submits form even if there is a validation error

如果有人可以帮助我，我会非常感激。

以下是代码：

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());
        }
    });

1 个答案:

答案 0 :(得分：1)

引用OP ：

  

＆＃34; ...听起来像验证插件（jquery.validate.min.js）无法在我们正在使用的jQuery的cdn版本中找到。＆＃34; 

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

根本问题是不 ＆＃34; jQuery的CDN版本＆＃34; ...这是 jQuery UI的CDN版本并且 jQuery 或 jQuery UI 都不会包含 jQuery Validate插件;也不会 jQuery 在 jQuery UI 中。

jQuery 和 jQuery Validate插件是您需要与 jQuery UI 分开包含的两件事。请参阅this page上的CDN链接，了解 jQuery验证插件和this page jQuery 本身。请记住在 j 查询用户界面和任何其他jQuery插件之前加入 jQuery 。 （jQuery UI 被视为 jQuery 插件。）

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

由于您正在使用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>

基于编辑的编辑......

引用OP：

  

正如我之前提到的，我不认为jQuery validate插件适用于bootstrap，因为似乎jQuery插件需要＆＃34;输入类型=＆＃34;提交＆＃34;而bootstrap需要以下（＆＃34;按钮类型=＆＃34;提交＆＃34;）。如果我更改＆＃34;按钮类型＆＃34;到＆＃34;输入类型＆＃34;在HTML中，bootstrap不接受这个。

相关问题
最新问题