停用智能街道功能

Deactivating Smarty Streets functionality

本文关键字：功能 街道 智能      更新时间：2023-09-26

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

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

<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 事件按预期工作，但输入地址信息后，实时地址验证会阻止事件处理程序触发。

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

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

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

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

注意：我在SmartyStreets工作

如果最后一个元素是一个按钮，它不起作用（即使我使用 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>
相关文章：