在模态中使用jquery ajax + parsley验证提交表单

时间:2014-12-13 09:29:09

标签: javascript jquery ajax validation modal-dialog

以下是我的模态代码:

 <div class="modal fade" id="offline-payment">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&#215;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">Offline Payment</h4>
              </div>
              <div class="modal-body">
                <form class="form-horizontal" role="form" id="offlinepaymentform">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Payment Due Amount</label>
                        <label class="col-sm-6 control-label text-left" >$ <xsl:value-of select="payload/responseBody/com.alacriti.eippmodel.vo.InvoiceDetailsVO/paymentDueAmount"></xsl:value-of></label>
                        <input name="paymentDueAmount" type="hidden" class="form-control" value="{payload/responseBody/com.alacriti.eippmodel.vo.InvoiceDetailsVO/paymentDueAmount}" />
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Payment Date</label>
                        <div class="col-sm-6 validation-parsley">
                            <div class="col-sm-12 input-group date dp1" data-date="" data-date-format="dd-mm-yyyy">
                                <input name="paymentDate" class="form-control" size="16" readonly="true" type="text" data-parsley-required-message="Select date"  required="true"/>
                                <div class="add-on input-group-addon"><span class="glyphicon glyphicon-calendar"></span> </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Payment Method</label>
                        <div class="col-sm-6 validation-parsley">
                            <select name="fundingSourceTypeId" class="form-control" data-parsley-required-message="Select payemnet method" required="true" >
                                <option value="">Select Payment Method</option>
                                <xsl:for-each select="payload/responseBody/fundingSourceTypeVOList/com.alacriti.eippmodel.vo.FundingSourceTypeVO">
                                    <xsl:if test="fundingSourceTypeId != 1">
                                        <xsl:element name="option">
                                            <xsl:attribute name="value"><xsl:value-of select="fundingSourceTypeId" /></xsl:attribute>
                                            <xsl:value-of select="fundingSourceType"/>
                                        </xsl:element>
                                    </xsl:if>
                                </xsl:for-each>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Payment Amount</label>
                        <div class="col-sm-6 validation-parsley">
                            <input name="paymentAmount"  type="text" class="form-control" data-parsley-required-message="Please enter amount" required="true" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Payment Details</label>
                        <div class="col-sm-6">
                            <input name="offlinePaymentdetails" class="form-control" type="text" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Memo Details</label>
                        <div class="col-sm-6">
                            <textarea name="notes" class="form-control"></textarea>
                        </div>
                    </div>
                    <input name="invoiceIntID" type="hidden" class="form-control" value="{payload/responseBody/com.alacriti.eippmodel.vo.InvoiceDetailsVO/invoiceInternalId}" />
                    <input name="invoiceID" type="hidden" class="form-control" value="{payload/responseBody/com.alacriti.eippmodel.vo.InvoiceDetailsVO/invoiceID}" />
                    <input name="offlinePaymentVendorPartyId" type="hidden" class="form-control" value="{payload/responseBody/com.alacriti.eippmodel.vo.InvoiceDetailsVO/vendorPartyId}" />
                    <input name="offlinePaymentCustomerPartyId" type="hidden" class="form-control" value="{payload/responseBody/com.alacriti.eippmodel.vo.InvoiceDetailsVO/customerVo/customerId}" />
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Cancel</button>
                <button id="submit-offline-payment" type="button" class="btn btn-primary pull-right" >Save</button>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

我的jquery for parsley validation和ajax form submit:

$(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');
                    }
            });
        }
    });
});

我可以在欧芹验证后将ul附加到输入框。但是在parsley ul标签中没有显示错误消息。请帮帮我

0 个答案:

没有答案