I am getting the below image error when trying to simply validate a form. The error to me sounds like the validate plugin (jquery.validate.min.js) can't be found in the cdn version of jQuery we are using.
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
Here is the validation code I am using in the 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());
}
});
How can I get this simple plugin included in my project?
EDIT
jQuery JS validation
$("#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());
}
});
EDIT #2
As I mentioned before, I don't think the jQuery validate plugin works with bootstrap because it seems that the jQuery plugin requires "input type="submit" whereas bootstrap requires the following ("button type="submit"). If I change the "button type" to "input type" in the HTML, bootstrap doesn't accept this.
<button type="submit" id="btnSPAcceptShippingReq" class="btn btn-primary">Accept</button>
However, if I change the HTML in the jsFiddle to the below, it still works. So, I don't know what I'm missing in regards to the validation not firing when I click on the submit button....
<button type="submit" />
Note that while debugging, I do see the JS Validator code getting hit and initialized.
Note that I can't get the bootstrapValidator to work either as explained in this link: Bootstrap Validator submits form even if there is a validation error
If someone can help me out with that, I would greatly appreciate it.
Here's the code:
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">×</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());
}
});
