title: Submit form with jquery ajax + parsley validation in modal
body: <p>The below is my modal code: </p>
  
  <pre><code> &lt;div class="modal fade" id="offline-payment"&gt;
            &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"&gt;&lt;span aria-hidden="true"&gt;&amp;#215;&lt;/span&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;&lt;/button&gt;
                  &lt;h4 class="modal-title"&gt;Offline Payment&lt;/h4&gt;
                &lt;/div&gt;
                &lt;div class="modal-body"&gt;
                  &lt;form class="form-horizontal" role="form" id="offlinepaymentform"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label class="col-sm-3 control-label"&gt;Payment Due Amount&lt;/label&gt;
                          &lt;label class="col-sm-6 control-label text-left" &gt;$ &lt;xsl:value-of select="payload/responseBody/com.alacriti.eippmodel.vo.InvoiceDetailsVO/paymentDueAmount"&gt;&lt;/xsl:value-of&gt;&lt;/label&gt;
                          &lt;input name="paymentDueAmount" type="hidden" class="form-control" value="{payload/responseBody/com.alacriti.eippmodel.vo.InvoiceDetailsVO/paymentDueAmount}" /&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label class="col-sm-3 control-label"&gt;Payment Date&lt;/label&gt;
                          &lt;div class="col-sm-6 validation-parsley"&gt;
                              &lt;div class="col-sm-12 input-group date dp1" data-date="" data-date-format="dd-mm-yyyy"&gt;
                                  &lt;input name="paymentDate" class="form-control" size="16" readonly="true" type="text" data-parsley-required-message="Select date"  required="true"/&gt;
                                  &lt;div class="add-on input-group-addon"&gt;&lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt; &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label class="col-sm-3 control-label"&gt;Payment Method&lt;/label&gt;
                          &lt;div class="col-sm-6 validation-parsley"&gt;
                              &lt;select name="fundingSourceTypeId" class="form-control" data-parsley-required-message="Select payemnet method" required="true" &gt;
                                  &lt;option value=""&gt;Select Payment Method&lt;/option&gt;
                                  &lt;xsl:for-each select="payload/responseBody/fundingSourceTypeVOList/com.alacriti.eippmodel.vo.FundingSourceTypeVO"&gt;
                                      &lt;xsl:if test="fundingSourceTypeId != 1"&gt;
                                          &lt;xsl:element name="option"&gt;
                                              &lt;xsl:attribute name="value"&gt;&lt;xsl:value-of select="fundingSourceTypeId" /&gt;&lt;/xsl:attribute&gt;
                                              &lt;xsl:value-of select="fundingSourceType"/&gt;
                                          &lt;/xsl:element&gt;
                                      &lt;/xsl:if&gt;
                                  &lt;/xsl:for-each&gt;
                              &lt;/select&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label class="col-sm-3 control-label"&gt;Payment Amount&lt;/label&gt;
                          &lt;div class="col-sm-6 validation-parsley"&gt;
                              &lt;input name="paymentAmount"  type="text" class="form-control" data-parsley-required-message="Please enter amount" required="true" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label class="col-sm-3 control-label"&gt;Payment Details&lt;/label&gt;
                          &lt;div class="col-sm-6"&gt;
                              &lt;input name="offlinePaymentdetails" class="form-control" type="text" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label class="col-sm-3 control-label"&gt;Memo Details&lt;/label&gt;
                          &lt;div class="col-sm-6"&gt;
                              &lt;textarea name="notes" class="form-control"&gt;&lt;/textarea&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;input name="invoiceIntID" type="hidden" class="form-control" value="{payload/responseBody/com.alacriti.eippmodel.vo.InvoiceDetailsVO/invoiceInternalId}" /&gt;
                      &lt;input name="invoiceID" type="hidden" class="form-control" value="{payload/responseBody/com.alacriti.eippmodel.vo.InvoiceDetailsVO/invoiceID}" /&gt;
                      &lt;input name="offlinePaymentVendorPartyId" type="hidden" class="form-control" value="{payload/responseBody/com.alacriti.eippmodel.vo.InvoiceDetailsVO/vendorPartyId}" /&gt;
                      &lt;input name="offlinePaymentCustomerPartyId" type="hidden" class="form-control" value="{payload/responseBody/com.alacriti.eippmodel.vo.InvoiceDetailsVO/customerVo/customerId}" /&gt;
                  &lt;/form&gt;
                &lt;/div&gt;
                &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default pull-left" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
                  &lt;button id="submit-offline-payment" type="button" class="btn btn-primary pull-right" &gt;Save&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;&lt;!-- /.modal-content --&gt;
            &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
          &lt;/div&gt;&lt;!-- /.modal --&gt;
  </code></pre>
  
  <p>My jquery for parsley validation and ajax form submit:</p>
  
  <pre><code>$(document).ready(function(){
      $("#submit-offline-payment").click(function(){
          $('#offlinepaymentform').parsley('validate');
          if($('#offlinepaymentform').parsley().isValid())
          {
              var finalUrl = '/payment/offlinePayment';
              var formData = $('#offlinepaymentform').serialize();
              $.ajax({
                      type:'post',
                      url: finalUrl,
                      data : formData,
                      dataType: 'text',
                      success: function(data){
                          $('#offline-payment').empty();
                          $('#offline-payment').append(data);
                      },
                      error: function(){
                      alert('error');
                      }
              });
          }
      });
  });
  </code></pre>
  
  <p>I am able to get the ul attached to the input box after parsley validation. But error messages are not being displayed in the parsley ul tags. Please help me out </p>