Javascript PayPal Express签出按钮，单击按钮时进行验证

我正在编写新的PayPal Express Checkout JavaScript按钮，因此当单击它时，会运行一些验证，并基于验证，继续或抑制按钮体验

这个演示显示了一些验证，但并不完全是我需要的

我有这个测试用例，你可以试试：-这段代码使用贝宝的脚本：

这是我尝试使用的JSFIDLE的一部分

// Called when page displays
validate: function(actions) {
    console.log("validate called");
    actions.disable(); // Allow for validation in onClick()
    paypalActions = actions; // Save for later enable()/disable() calls
},

// Called for every click on the PayPal button even if actions.disabled
onClick: function() {
    console.log('onClick called');
    // Do validations and if OK, continue on to PayPal popup
    var zip = document.querySelector('#zipcode').value;
    var isValid = zip.length >= 5;
    // Issue: fix to continue if valid, suppress popup if invalid
    if (isValid) {
        document.querySelector('#msg').style.display = 'none';
        paypalActions.enable();
        // TODO: Simulate click of PayPal button to display popup
    } else {
        document.querySelector('#msg').style.display = 'block';
        paypalActions.disable(); // Too late
    }
},

validate（）只调用一次，基本上是在加载页面时。现在验证还为时过早。单击按钮时会调用onClick（）函数，这是进行验证的好地方，但如果有效，则无法继续，如果无效，则无法显示错误

演示在validate（）函数的作用域内使用复选框事件，因此它能够启用/禁用PayPal弹出窗口（如果禁用，onClick（）仍然有效）。演示的onClick（）只显示/隐藏错误消息

---

有人知道如何在onClick（）中进行验证吗？

我添加了一个新字段来验证哪个是客户名称我添加了一个验证并显示paypal弹出窗口如果它有效，您可以复制代码并更新小提琴并检查它：

<div style="font-family:arial;font-size:14px;">
<p id="msgZip" style="display:none;color:#c00">Please enter a 5-digit zip code</p>
<p><label><input id="zipcode" style="width:50px"> Zip Code</label></p>

<p id="msgName" style="display:none;color:#c00">Please enter your name</p>
<p><label><input id="customername" style="width:50px"> Customer name</label></p>

<div id="paypal-button-container"></div>

<hr/>
<p>
Enter a 5-character zip code and click the checkout button. Validation takes place and since
it is valid, the PayPal experience should display.</p>
<p>A second click on the button does so since the earlier successful validation enabled the button.
</p>
</div>

---

剩下的问题是，您必须单击按钮2次，因为第一次执行

操作时，启用（）以启用按钮操作。因此，您在第二次单击后开始签出过程

为了解决这个问题，我使用了一个/多个事件侦听器，并从那里启用或禁用操作：

validate: function(actions) {
  actions.disable();
  // i added a 'validate' class value for each element i track
  document.querySelectorAll('.validate').forEach(item => {
    item.addEventListener('change', event => {
      var valid = true; // set it to false if any rule is violated
      /**********************************/
      /* set your validation rules here */
      /**********************************/
      if (valid) {
        actions.enable();
      } else {
        actions.disable();
      }
    });
  });
}

您仍然可以在onClick函数中进行一些CSS样式的更改（如输入字段的红色边框）
禁用/允许按钮为时已晚，因此，在用户实际单击之前，您必须验证每个输入更改的所有内容，并启用/禁用PayPal按钮。
使用javascript创建验证函数，如果验证失败，请调用e.preventdefault（），我尝试添加e.preventdefault（）在验证失败时，控制台显示：e.preventDefault不是一个函数。如果我希望在验证成功时运行它，那么它将不会有帮助。我看到了附加的名称字段和它所需的验证，但问题仍然存在-成功验证后，PayPal登录/签出过程不会运行。@GarDavis是，当您单击它两次时，它将运行。这是另一个问题//待办事项：模拟点击PayPal按钮以显示弹出窗口这是一个大的待办事项。你能解决这个问题吗？它在第二次点击后运行
validate: function(actions) {
  actions.disable();
  // i added a 'validate' class value for each element i track
  document.querySelectorAll('.validate').forEach(item => {
    item.addEventListener('change', event => {
      var valid = true; // set it to false if any rule is violated
      /**********************************/
      /* set your validation rules here */
      /**********************************/
      if (valid) {
        actions.enable();
      } else {
        actions.disable();
      }
    });
  });
}