I have the following image where you can plainly see that the field is required after I submit the form.
However, after submitting the form, it continues on to the button click event in the JS instead of stopping the form submission.
What am I missing here with BootStrap Validator where I can prevent the form from being submitted if there are validation errors?
Here is my HTML5 MasterPage pertinent parts
<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">
Here is my JS which gets initialized, but when run, I get the error stated in my comments:
$('#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'
}
}
}
}
});
Here is my 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>
EDIT - WITH BootstrapValidator in place
MasterPage
<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
Note that the code inside this function gets executed on the onDocumentReady event. I see it get executed when the page finishes loading.
$('#form1').bootstrapValidator({
submitButtons: 'button[type="submit"]',
fields: {
txtSPStatusComments: {
validators: {
notEmpty: {
message: 'Status Comments required!'
}
}
}
}
});
