Jquery 即使存在验证错误，引导验证程序也会提交表单
我有下图，您可以清楚地看到，在我提交表单后，该字段是必需的。 但是，提交表单后，它会继续执行JS中的按钮单击事件，而不是停止表单提交 如果存在验证错误，我可以阻止表单提交的BootStrap Validator缺少了什么 这是我的HTML5主页的相关部分 这是我的HTML5Jquery 即使存在验证错误，引导验证程序也会提交表单,jquery,html,twitter-bootstrap,jqbootstrapvalidation,Jquery,Html,Twitter Bootstrap,Jqbootstrapvalidation,我有下图，您可以清楚地看到，在我提交表单后，该字段是必需的。 但是，提交表单后，它会继续执行JS中的按钮单击事件，而不是停止表单提交 如果存在验证错误，我可以阻止表单提交的BootStrap Validator缺少了什么 这是我的HTML5主页的相关部分 这是我的HTML5 也许这个问题会有帮助：嗯，我可以看到编辑中的代码得到初始化，但当单击提交按钮时，我得到一个错误，说明此对象或属性不支持此方法。这基本上意味着，我的项目中的formValidation.min.js文件不支持bootstra
也许这个问题会有帮助：嗯，我可以看到编辑中的代码得到初始化，但当单击提交按钮时，我得到一个错误，说明此对象或属性不支持此方法。这基本上意味着，我的项目中的formValidation.min.js文件不支持bootstrapValidator对象。我尝试了几个链接将正确的JS文件放入我的项目中进行验证，但每次都会出现相同的错误。我只是希望有人能明确地告诉我，我可以在哪里下载验证器，它将在zip文件中的哪个文件夹，因为现在，我很沮丧。好的，你需要包括css和js，你可以使用CDN，检查CDN部分。另外，我认为这个例子可以帮助你：Patrick LC，非常感谢你的输入。我仔细查看了下面url中的示例，完全理解了它。然而，我的简单表单只有在我开始输入时才有效；“提交”按钮将被禁用。如果我立即进入表单并单击submit按钮，它不会触发验证。我希望你能在我完成编辑后看看我遗漏了什么。我离你的代码太近了……也许我不太明白问题在哪里。
<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">
$('#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'
}
}
}
}
});
<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>
<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">
<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>
$('#form1').bootstrapValidator({
submitButtons: 'button[type="submit"]',
fields: {
txtSPStatusComments: {
validators: {
notEmpty: {
message: 'Status Comments required!'
}
}
}
}
});