Javascript 停用Smarty Streets功能
我有一个表格,我正在使用Smarty Streets Live地址验证。总的来说,它工作得很好。但是,在用户开始输入地址信息的情况下,Live address验证可能会遇到阻碍。遇到的最具体的问题是输入了地址信息但用户选择取消表单的情况。Live Address验证优先于操作,并阻止停用验证和清除表单的尝试 这个问题的一个简单例子可以找到Javascript 停用Smarty Streets功能,javascript,jquery,validation,smartystreets,Javascript,Jquery,Validation,Smartystreets,我有一个表格,我正在使用Smarty Streets Live地址验证。总的来说,它工作得很好。但是,在用户开始输入地址信息的情况下,Live address验证可能会遇到阻碍。遇到的最具体的问题是输入了地址信息但用户选择取消表单的情况。Live Address验证优先于操作,并阻止停用验证和清除表单的尝试 这个问题的一个简单例子可以找到 取消 var ss=jQuery.LiveAddress({key:'5640108848289556771',debug:true}) $(函数(
取消
var ss=jQuery.LiveAddress({key:'5640108848289556771',debug:true})
$(函数(){
$(“#btnCancel”)。单击(函数(e){
e、 预防默认值();
警报(“点击”);
ss.deactivate();
});
});
当未输入任何数据时,单击事件按需要工作,但一旦输入地址信息,实时地址验证将阻止事件处理程序触发
单击“取消”按钮时,表单应被清除或返回到上一页,但Live Address验证将接管并阻止所有其他操作
如何在按钮点击事件中停用Live Address验证?您的取消按钮被映射为插件端的“提交”按钮。这意味着插件可以识别该按钮,以便在单击时调用验证。验证将在实际执行您所看到的任何其他操作之前进行。解决这个问题有两种方法
“[type=submit],[type=image],[type=button]:last,button:last”
. 如果您添加了另一个按钮,那么您的取消按钮将是自由的,并且在单击时不会调用验证注意:我为SmartyStreets工作如果最后一个元素是按钮(即使我使用了
event.stopPropagation();
,它也不工作,因此我使用了a链接
为此,我映射了地址字段,分配了地址ID,然后使用activate()和deactivate()命令功能。这使我能够允许管理员用户绕过验证并在不输入任何内容的情况下发布表单。它检查.smarty标记的可见性,以确定是否应激活或停用验证
<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>
var liveaddress=jQuery.liveaddress({
钥匙:“钥匙”,
是的,
地址:[{
id:'地址id',
街道:“#地址”,
街道2:“#地址2”,
城市:“#城市”,
州:“#州”,
zipcode:“#Zip”,
国家:“#国家”
}]
});
$(函数(){
/*如果重新编辑并预先填充了地址,则不要重新验证*/
liveaddress.on(“MapInitialized”,函数(事件、数据、previousHandler){
if($('#Address').val().length!==0){
liveaddress.deactivate('AddressID');
}
});
$('#toggleSS')。单击(函数(e){
e、 预防默认值();
if($('.smarty标记:可见').length){
liveaddress.deactivate('AddressID');
}否则{
liveaddress.activate('AddressID');
}
});
/*如果编辑地址,则自动启用验证*/
$('#Address').keyup(函数(){
if(!$('.smarty标记:可见').length){
liveaddress.activate('AddressID');
}
});
});
我已经按照建议使用提交按钮更新了fiddle示例,它似乎可以正常工作。谢谢!嘿@lynnjwalker我提供了一个使用a链接(而不是按钮)的替代解决方案,并包含了在编辑预先存在的地址(已经验证)时禁用的逻辑如果地址被修改,则自动启用验证(&A)。(我在按钮中使用FONTAWESE并更改fa开关类以匹配状态。)
<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>