title: Error received on validating form with the jQuery validate method
body: <p>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.</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Here is the validation code I am using in the JS:</p>
  
  <pre><code>$('#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());
              }
          });
  </code></pre>
  
  <p><strong>How can I get this simple plugin included in my project?</strong></p>
  
  <p><img src="https://i.stack.imgur.com/ntZBu.png" alt="enter image description here"></p>
  
  <h2>EDIT</h2>
  
  <p>jQuery JS validation</p>
  
  <pre><code>$("#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());
          }
      });
  </code></pre>
  
  <h2>EDIT #2</h2>
  
  <p>As I mentioned before, I don't think the jQuery validate plugin works with bootstrap because it seems that the jQuery plugin requires "<strong>input type="submit</strong>" 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.</p>
  
  <pre><code>&lt;button type="submit" id="btnSPAcceptShippingReq" class="btn btn-primary"&gt;Accept&lt;/button&gt;
  </code></pre>
  
  <p>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....</p>
  
  <pre><code>&lt;button type="submit" /&gt;
  </code></pre>
  
  <p>Note that while debugging, I <strong>do</strong> see the JS Validator code getting hit and initialized.</p>
  
  <p>Note that I can't get the bootstrapValidator to work either as explained in this link:
  <a href="https://stackoverflow.com/questions/27301395/bootstrap-validator-submits-form-even-if-there-is-a-validation-error">Bootstrap Validator submits form even if there is a validation error</a></p>
  
  <p>If someone can help me out with that, I would greatly appreciate it.</p>
  
  <p>Here's the code:</p>
  
  <h2>HTML MasterPage</h2>
  
  <p>
          
          
          
          
          
          
          
          
          
          
          
          
          </p>
  
  <pre><code>    &lt;!-- page specific plugin styles --&gt;
      &lt;link rel="stylesheet" href="../Content/assets/css/jquery-ui.min.css" /&gt;
      &lt;link rel="stylesheet" href="../Content/assets/css/datepicker.css" /&gt;
      &lt;link rel="stylesheet" href="../Content/assets/css/ui.jqgrid.css" /&gt;
  
      &lt;script src="../Scripts/jquery-2.1.0.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;script src="../Scripts/knockout-3.1.0.debug.js"&gt;&lt;/script&gt;
      &lt;script src="../Content/lib/assets/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="../Content/lib/assets/js/bootbox3/bootbox.min.js"&gt;&lt;/script&gt;
      &lt;script src="../Scripts/modernizr-2.6.2.min.js"&gt;&lt;/script&gt;
      &lt;script src="../Content/lib/assets/js/jquery.validate.min.js"&gt;&lt;/script&gt;
      &lt;script src="../Content/lib/assets/js/bootstrapValidator/bootstrapValidator.min.js"&gt;&lt;/script&gt;
  
      &lt;%--&lt;script src="Scripts/jquery.jqGrid.min.js"&gt;&lt;/script&gt;--%&gt;
      &lt;script src="../Scripts/modernizr-2.6.2.min.js"&gt;&lt;/script&gt;
      &lt;script src="../Content/lib/assets/js/jquery.jqGrid.min.js"&gt;&lt;/script&gt;
      &lt;script src="../Scripts/json2.min.js"&gt;&lt;/script&gt;
      &lt;script src="../Content/lib/assets/js/bootstrap-datepicker.min.js"&gt;&lt;/script&gt;
  
  
      &lt;script src="../Scripts/Common.js"&gt;&lt;/script&gt;
      &lt;script src="../Scripts/DataServices/CreditSourceDocs.js"&gt;&lt;/script&gt;
      &lt;script src="../Scripts/DataServices/StopPenalize.js"&gt;&lt;/script&gt;
      &lt;script src="../Scripts/DataServices/PISIQueue.js"&gt;&lt;/script&gt;
      &lt;script src="../Scripts/DataServices/BalanceReview.js"&gt;&lt;/script&gt;
  
      &lt;asp:ContentPlaceHolder ID="head" runat="server"&gt;
      &lt;/asp:ContentPlaceHolder&gt;
  &lt;/head&gt;
  
  &lt;body class="no-skin"&gt;
      &lt;form id="form1" runat="server" data-toggle="validator" class="form-horizontal" role="form"&gt;
  </code></pre>
  
  <h2>HTML ChildPage</h2>
  
  <pre><code>&lt;div class="modal-dialog"&gt;
                                                  &lt;div class="modal-content"&gt;
                                                      &lt;div class="modal-header"&gt;
                                                          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                                                          &lt;h4 class="modal-title" id="btnSPStopGrid-label"&gt;Stop Parts Shipping Request&lt;/h4&gt;
                                                      &lt;/div&gt;
                                                      &lt;div class="modal-body"&gt;
                                                          &lt;div class='form-group'&gt;
                                                              &lt;span class="label label-default col-sm-7 col-sm-offset-2"&gt;Enter the reason and comments to stop the Shipping Request&lt;/span&gt;
                                                              &lt;br /&gt;
                                                              &lt;label class="required col-sm-1 control-label" for="txtSPStatusComments"&gt;Status Comments:&lt;/label&gt;
                                                              &lt;div class="col-sm-9 col-sm-offset-1"&gt;
                                                                  &lt;textarea id="txtSPStatusComments" name="txtSPStatusComments" rows="5" cols="80" class="form-control height-auto" placeholder="Enter Comments"&gt;&lt;/textarea&gt;
                                                              &lt;/div&gt;
                                                              &lt;div class="hide-text"&gt;
                                                                  &lt;input type="hidden" id="txtSPStopGridID" /&gt;
                                                              &lt;/div&gt;
                                                          &lt;/div&gt;
                                                      &lt;/div&gt;
                                                      &lt;div class="modal-footer"&gt;
                                                          &lt;button type="submit" id="btnSPAcceptShippingReq" class="btn btn-primary"&gt;Accept&lt;/button&gt;
                                                          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
  </code></pre>
  
  <h2>JS</h2>
  
  <pre><code>$("#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());
          }
      });
  </code></pre>