Question

我有一个表格，其中包含ui中的braintree drop，我想在提交付款处理表单之前验证客户信息已填写。

我正在使用jQuery的validate插件，并且有类似这样的简单

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字段留空并提交表单，则会显示验证错误，但表单仍然会提交并处理付款。

在这种情况下如何停止表单提交，直到表单有效（我知道有一个valid();）与jQuery但我不确定braintree.js是否在幕后做某事来覆盖我的验证？

Answer 1

以下是我最终如何做到这一点:(见：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();
                }
            }

    });

Braintree.js中的自定义验证

1 个答案: