禁用表单“操作”；如果 jquery 验证失败

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

马丘，你是救命恩人。这就像一个魅力。

不过我确实遇到了一件奇怪的事情。添加该脚本后，当输入有效的硬件密钥并单击“添加到购物车”时，我的购物车现在会在新的浏览器选项卡中打开，而不是在同一窗口中弹出。这里有什么想法吗？以防万一，我的新 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">