2016-02-12 30 views
1

我有一個表單,包括在ui braintree下降,我想驗證客戶信息填寫之前提交表單進行付款處理。自定義驗證 - Braintree.js

我使用jQuery的驗證插件,並有一些簡單的像這樣

var transaction = $('#braintree-transaction-form'); 
transaction.validate({ 
rules: { 
    'first_name': { 
    required: true 
    }, 
    messages: { 
     'first_name': 'Please enter your First Name', 
    highlight: function(element) { 
     $(element).parent().removeClass("success").addClass("error"); 
    }, 
    success: function(element) { 
     $(element).parent().removeClass("error").addClass("success").find("label.error").remove(); 
    }, 
    }); 
} 

所以,如果我離開FIRST_NAME領域的空白,並提交表單,驗證錯誤顯示,但形式仍然提交和處理支付。

如何在jQuery中停止表單提交,直到表單有效(並且我知道存在valid();),但我不確定braintree.js是否在幕後執行某些操作來覆蓋我的驗證?

任何幫助表示讚賞

+0

我有同樣的問題;我向braintree發送電子郵件,看看他們是否有解決方案。 –

+0

我想出了一個解決方案,我會在早上發佈 – Richlewis

回答

2

這裏是我最終做它:(參見:onPaymentMethodReceived)

braintree.setup(<?php echo json_encode($braintree_token); ?>, "dropin", { 
     dataCollector: { 
      kount: {environment: <?php echo json_encode((!defined("PAYPAL_SANDBOX") or PAYPAL_SANDBOX) ? 'sandbox' : 'production'); ?>} 
      }, 
     container: "braintree-container", 
     form: "buy_download_form", 
      onReady: function (braintreeInstance) { 
       var form = document.getElementById('buy_download_form'); 
       var deviceDataInput = form['device_data']; 
       if (deviceDataInput == null) { 
       deviceDataInput = document.createElement('input'); 
       deviceDataInput.name = 'device_data'; 
       deviceDataInput.type = 'hidden'; 
       form.appendChild(deviceDataInput); 
       } 

       deviceDataInput.value = braintreeInstance.deviceData; 
      }, 
      onPaymentMethodReceived: function(payload) { 
       var nonce = payload.nonce; 
       var formValid = $('#buy_download_form').valid(); 
       var didCaptcha = grecaptcha.getResponse() != ''; 
       if (!didCaptcha) 
       { 
        $("#error_message_box").append('<li><label for="recaptcha" class="error" style="display: inline;">You did NOT perform the im not a robot (reCaptcha)</label></li>'); 
        $("#error_message_box").show(); 
        $('html, body').animate({ 
          scrollTop: $("body").offset().top 
         }, 300); 
        return false; 
       } 

       if (formValid && nonce) 
       { 
        var form = document.getElementById('buy_download_form'); 
        var payment_method_nonce = document.createElement('input'); 
        payment_method_nonce.name = 'payment_method_nonce'; 
        payment_method_nonce.type = 'hidden'; 
        payment_method_nonce.value = nonce; 
        form.appendChild(payment_method_nonce); 
        form.submit(); 
       } 
      } 

    });