2

我有一个表单，我正在使用 Smarty Streets 实时地址验证。一般来说，它运作良好。但是，在用户已经开始输入地址信息的情况下，实时地址验证可能会妨碍您。遇到的最具体的问题是地址信息已输入但用户选择取消表单的情况。实时地址验证优先于操作并阻止尝试停用验证并清除表单。

可以在此处找到该问题的一个小提琴示例。

<form>
   <input type="text" id="street" name="street" placeholder="street"><br>
   <input type="text" id="city" name="city" placeholder="city"><br>
   <input type="text" id="state" name="state" placeholder="city"><br>
   <input type="text" id="ZIP" name="ZIP" placeholder="ZIP"><br>
   <button id="btnCancel">Cancel</button>
</form>
<script>
    var ss = jQuery.LiveAddress({ key: '5640108848289556771', debug: true })

    $(function () {
        $("#btnCancel").click(function (e) {
            e.preventDefault();
            alert("click");
            ss.deactivate();
        });
    });
</script>

当没有输入数据时，click 事件按需要工作，但一旦输入地址信息，实时地址验证会阻止事件处理程序触发。

单击取消按钮时，表单应被清除或返回到上一页，但实时地址验证接管并阻止所有其他操作。

如何在按钮单击事件上停用实时地址验证？

4

2 回答 2

1

您的取消按钮被映射为插件端的“提交”按钮。这意味着插件识别该按钮以在单击时调用验证。验证将在实际执行您所看到的任何其他操作之前进行。有两种解决方案可以解决此问题。

  1. 在表单中添加另一个按钮。"[type=submit], [type=image], [type=button]:last, button:last" 该插件使用此选择器Line 48查找提交按钮。如果您添加另一个按钮，那么您的取消按钮将是免费的，并且在单击时不会调用验证。
  2. 配置插件时，将 submitVerify 设置为 false。请参阅此处的文档。这将禁用表单上所有按钮的验证。仅当您单击插件复选标记气泡时才会进行验证。

注意：我在 SmartyStreets 工作

于 2015-05-11T17:52:59.063 回答
0

如果最后一个元素是按钮，则它不起作用（即使我使用event.stopPropagation();了 ，所以我使用了 A 链接。

为此，我映射了地址字段，分配了地址 ID，然后使用了 activate() 和 deactivate() 函数。这使我能够允许管理员用户绕过验证并在不输入任何内容的情况下发布表单。它检查复选.smarty-tag标记的可见性以确定它是否应该激活或停用验证。

<script type="text/javascript">
var liveaddress = jQuery.LiveAddress({
    key: "key",
    debug: true,
    addresses: [{
        id: 'AddressID',
        street: '#Address',
        street2: '#Address2',
        city: '#City',
        state: '#State',
        zipcode: '#Zip',
        country: '#Country'
    }]
});
$(function(){
    /* If re-editing and address is pre-populated, don't revalidate */
    liveaddress.on("MapInitialized", function(event, data, previousHandler){
        if ($('#Address').val().length !== 0){
            liveaddress.deactivate('AddressID');
        }
    });

    $('#toggleSS').click(function(e){
        e.preventDefault();
        if ($('.smarty-tag:visible').length){
            liveaddress.deactivate('AddressID');
        } else {
            liveaddress.activate('AddressID');
        }
    });
    /* If editing address, auto-enable verification */
    $('#Address').keyup(function(){
        if (!$('.smarty-tag:visible').length){
            liveaddress.activate('AddressID');
        }
    });
});
</script>


<input type="submit" value="Save"> <a href="#" id="toggleSS">Toggle Verification</a>
于 2015-12-01T18:24:57.927 回答