1

我有以下图片，您可以在我提交表单后清楚地看到该字段是必需的。 在此处输入图像描述

但是，提交表单后，它会继续处理 JS 中的按钮单击事件，而不是停止表单提交。

BootStrap Validator 我在这里缺少什么，如果出现验证错误，我可以阻止提交表单？

这是我的 HTML5 MasterPage 相关部分

<script src="../Content/lib/assets/js/validator.js"></script>
<script src="../Content/lib/assets/js/formValidation.js"></script>
<form id="form1" runat="server" data-toggle="validator" class="form-horizontal" role="form">

这是我的 JS，它被初始化，但是在运行时，我收到评论中所述的错误：

 $('#form1').bootstrapValidator({
        live: 'enabled',

        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            txtSPStatusComments: {
                selector: '#txtSPStatusComments',
                validators: {
                    notEmpty: {
                        message: 'The title is required and cannot be empty'
                    }
                }
            }
        }
    });

这是我的 HTML5

<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" rows="5" cols="80" class="form-control height-auto" placeholder="Enter Comments" required></textarea>
    </div>
    <div class="help-block with-errors"></div>
    <div class="hide-text">
      <input type="hidden" id="txtSPStopGridID" />
    </div>
    <div id="SPmessages"></div>
  </div>
</div>
<div class="modal-footer">
  <button type="button" id="btnSPAcceptShippingReq" class="btn btn-primary">Accept</button>
  <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>

编辑 - 使用 BootstrapValidator

母版页

<head id="Head1" runat="server">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <link href="../Content/lib/assets/css/bootstrap.css" rel="stylesheet" />
    <link href="../Content/lib/assets/css/bootstrapValidator.min.css" rel="stylesheet" />
    <link href="../Content/lib/assets/css/datepicker.css" rel="stylesheet" />
    <link href="../Content/assets/css/font-awesome.min.css" rel="stylesheet" />
    <link href="../Content/bootstrap-switch/bootstrap2/bootstrap-switch.min.css" rel="stylesheet" />
    <link rel="Stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <link href="../Content/lib/assets/css/js-css-menu.css" rel="stylesheet" />
    <link href="../Content/lib/assets/css/js-css-menu.min.css" rel="stylesheet" />

    <!-- 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

<div class='form-group'>                                                    
   <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>
<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>

JS

请注意，此函数中的代码在 onDocumentReady 事件上执行。我看到它在页面完成加载时被执行。

$('#form1').bootstrapValidator({
        submitButtons: 'button[type="submit"]',
        fields: {
            txtSPStatusComments: {
                validators: {
                    notEmpty: {
                        message: 'Status Comments required!'
                    }
                }
            }
        }
    });
4

0 回答 0