Question

我正在尝试最终确定我的网页购物车，但我遇到了最后一个问题。我的“添加到购物车”按钮旁边有一个文本框，需要在完成购买之前输入特定的硬件密钥（指纹）。我需要进行设置，以便最终用户无法点击“添加到购物车”，直到该字段得到验证。

我已成功设置验证以使文本框成为必需且仅允许特定字符串，但我似乎无法弄清楚如何动态“禁用”表单操作，直到成功验证文本框。

这是我的jquery：

<script>
$(document).ready(function() {

$.validator.addMethod("os0", function(value) {
    return /^(([a-fA-F0-9]{4,4})+\-([a-fA-F0-9]{4,4}))$/.test(value); 
    }, "Invalid Fingerprint.");     

$("#myFingerprint").validate({  
     rules: {
        os0: "required os0",
    },      
  });
});
</script>

以下是相应的HTML :(表单代码是从我们的电子商务提供商处复制和粘贴的）

<td>                                                            
 <form id="myFingerprint" action="https://www.blahblahblah.com/ecom/gb.php?c=cart&i=770678&cl=122992&ejc=2" target="ej_ejc" method="POST" accept-charset="UTF-8">

 <input type="hidden" name="on0" value="Fingerprint"/>

Fingerprint:<br/>

<input type="text" id="os0" name="os0" maxlength="9"/>

<input type="image" src="http://www.blahblahblah.com/add_to_cart.gif" border="0" alt="Add to Cart" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(parent);"/>
 </form>
</td>

Answer 1

您可以为表单提供onsubmit方法，如果表单未经过验证，则可以取消表单提交。

$('#myFingerprint').submit(function (e) {
    if(!all_of_my_validation_passed) {
        e.preventDefault();
    }
});

Answer 2

Matchu，你是一个救生员。这就像一个魅力。

我确实有一个奇怪的事情。添加该脚本后，当输入有效的硬件密钥并单击“添加到购物车”时，我的购物车现在将在新的浏览器选项卡中打开，而不是在同一窗口中弹出。这里有什么想法？为了以防万一，我的新html表单代码如下所示：

<form id="myFingerprint" action="https://www.e-junkie.com/ecom/gb.php?c=cart&i=770678&cl=122992&ejc=2"  method="POST" onSubmit="return function(e)" target="ej_ejc" accept-charset="UTF-8">

如果jquery验证失败，则禁用表单“action”

2 个答案: