如何将 SmartyStreets 验证应用于同一页面中的两个表单?
Posted
技术标签:
【中文标题】如何将 SmartyStreets 验证应用于同一页面中的两个表单?【英文标题】:How can I apply SmartyStreets validation to two forms in the same page? 【发布时间】:2016-02-12 02:20:01 【问题描述】:``` .col-md-6 %h3 美国地址
%form.form-horizontal %label 街道地址 %input.form-controlid: 'street', name: 'street', 样式: 'margin-bottom: 10px;font-size:13px;height:30px"'
%label 城市 %input.form-controlid: 'city', name: 'city', style: 'margin-bottom: 10px;font-size:13px;height:30px"'
%label 状态 %input.form-controlid: 'state', name: 'state', style: 'margin-bottom: 10px;font-size:13px;height:30px"'
%label 邮政编码 %input.form-controlid: 'zipcode', name: 'zipcode', style: 'margin-bottom: 10px;font-size:13px;height:30px"'
.row %br %br %input.btn.btn-ss-alt.btn-lgtype: "submit", name: "commit", style: "margin-bottom:20px;float:right;margin-right: 15px;padding:10px 72px ;"
.col-md-6 %h3 国际地址
%form.form-horizontal %label 街道地址 %input.form-controlid: 'street', name: 'street', 样式: 'margin-bottom: 10px;font-size:13px;height:30px"'
%label 城市 %input.form-controlid: 'city', name: 'city', style: 'margin-bottom: 10px;font-size:13px;height:30px"'
%label 状态 %input.form-controlid: 'state', name: 'state', style: 'margin-bottom: 10px;font-size:13px;height:30px"'
%label 邮政编码 %input.form-controlid: 'zipcode', name: 'zipcode', style: 'margin-bottom: 10px;font-size:13px;height:30px"'
.row %br %br %input.btn.btn-ss-alt.btn-lgtype: "submit", name: "commit", style: "margin-bottom:20px;float:right;margin-right: 15px;padding:10px 72px ;" ```
SmartyStreets 插件仅适用于第一种形式,不适用于第二种形式。
var liveaddress = $.LiveAddress(
key: #ENV['SMARTY_STREETS'],
debug: true,
addresses: [
street: '#street',
city: '#city',
state: '#state',
zipcode: '#zipcode'
]
);
【问题讨论】:
【参考方案1】:很简单,只需将每个表单包装在一个表单标签中,并为每个字段分配一个不同的名称(或 ID)。该插件将拾取它。这是使用自定义字段映射的两个表单的示例:
http://jsfiddle.net/p02qxh0L/69/
这是一个使用自动映射在同一页面上包含 16 个表单的示例:
https://smartystreets.com/docs/plugin/examples
示例 html:
<form id="shipping">
<input type="text" id="pais" name="pais" placeholder="pais">
<br>
<br>
<input type="text" id="calle" name="calle" placeholder="calle">
<br>
<input type="text" id="ciudad" name="ciudad" placeholder="ciudad">
<br>
<input type="text" id="estado" name="estado" placeholder="estado">
<br>
<input type="text" id="codigo" name="codigo" placeholder="codigo">
<br>
</form>
<hr>
<form id="billing">
<input type="text" id="pais2" name="pais2" placeholder="pais2">
<br>
<br>
<input type="text" id="calle2" name="calle2" placeholder="calle2">
<br>
<input type="text" id="ciudad2" name="ciudad2" placeholder="ciudad2">
<br>
<input type="text" id="estado2" name="estado2" placeholder="estado2">
<br>
<input type="text" id="codigo2" name="codigo2" placeholder="codigo2">
<br>
</form>
示例 javascript
evar ss = jQuery.LiveAddress(
key: '5640108848371823003',
waitForStreet: true,
debug: true,
addresses: [
country: '#pais',
street: '#calle',
city: '#ciudad',
state: '#estado',
zipcode: '#codigo'
,
country: '#pais2',
street: '#calle2',
city: '#ciudad2',
state: '#estado2',
zipcode: '#codigo2'
]
);
【讨论】:
在addresses
数组中再设置一个地址对象就是票。谢谢!
如果我在addresses数组中设置了多个地址对象,那么是否需要为这两个字段提供地址?以上是关于如何将 SmartyStreets 验证应用于同一页面中的两个表单?的主要内容,如果未能解决你的问题,请参考以下文章
将 UIPanGestureRecognizer 应用于同一个按钮时如何访问 uibutton