单击“eWAY付费”按钮时如何验证表单

Question

我已经在表单中创建了按钮。

    <form action="?" method="POST">
  Name: <input type="text" name="customer_name" value="" />

  <script src="https://secure.ewaypayments.com/scripts/eCrypt.js"
   class="eway-paynow-button" 
  data-publicapikey="epk-6AEE4269-0010-4415-A327-8064928AEFD0"
  data-amount="0"
  data-currency="AUD" 
  data-allowedit="true"
  data-resulturl="http://example.com/responseMsg.php">
</script>

</form>

在加载eway支付表单之前，我需要检查customer_name字段是否为空。如果customer_name字段为空，不加载eway form.how，我会这样做吗？？我可以运行javascript来验证这个表单吗？

Answer 1

Pay按钮不提供在打开支付表单之前运行函数的钩子，目前也不使用事件侦听器。这里的解决办法是：

1. 捕获原始onclick处理程序
2. 添加一个执行验证的新事件侦听器，如果成功，则调用原始的onclick。

为此，我坚持使用纯JS，jQuery将允许更清晰的实现:-)

还请注意，我已经删除了data-resulturl属性，并将该URL移动到form标记，否则该窗口可能只是重定向而不提交。

<form action="http://example.com/responseMsg.php" method="POST">
  Name: <input type="text" name="customer_name" value="" />

  <script src="https://secure.ewaypayments.com/scripts/eCrypt.js"
   class="eway-paynow-button" 
  data-publicapikey="epk-6AEE4269-0010-4415-A327-8064928AEFD0"
  data-amount="10"
  data-currency="AUD" 
  data-allowedit="true"
  data-submitform="yes">
</script>

</form>

<script>

  window.onload = function() {
    // Find the eWAY Pay Now button - note getElementsByClassName is IE9+
    var ewayButton = document.getElementsByClassName("eway-button")[0];

    // save and remove old onclick
    var oldeWAYclick = ewayButton.onclick;
    ewayButton.onclick = null;

    // Add new listener with validation
    ewayButton.addEventListener("click", function(e){ 
        // Stop form from submitting itself
        e.preventDefault();

        // Example validation
        var name = document.forms[0]["customer_name"].value;
        if (name == null || name == "") {
            alert("Please complete all fields");
            return;
        }   
        // Display payment form
        oldeWAYclick();
    }, false);
  };

</script>