javascript - 如何将 SmartyStreets 验证应用于同一页面中的两个表单？

Question

```.col-md-6%h3 美国地址

%form.form-水平%label 街道地址%input.form-control{id: 'street', name: 'street', style: 'margin-bottom: 10px;font-size:13px;height:30px"'}

%label 城市%input.form-control{id: 'city', name: 'city', style: 'margin-bottom: 10px;font-size:13px;height:30px"'}

%标签状态%input.form-control{id: 'state', name: 'state', style: 'margin-bottom: 10px;font-size:13px;height:30px"'}

%label 邮政编码%input.form-control{id: 'zipcode', name: 'zipcode', style: 'margin-bottom: 10px;font-size:13px;height:30px"'}

.行 %br %br %input.btn.btn-ss-alt.btn-lg{type: "submit", name: "commit", style: "margin-bottom:20px;float:right;margin-right: 15px;padding:10px 72px ;"

.col-md-6%h3 国际地址

%form.form-水平%label 街道地址%input.form-control{id: 'street', name: 'street', style: 'margin-bottom: 10px;font-size:13px;height:30px"'}

%label 城市%input.form-control{id: 'city', name: 'city', style: 'margin-bottom: 10px;font-size:13px;height:30px"'}

%标签状态%input.form-control{id: 'state', name: 'state', style: 'margin-bottom: 10px;font-size:13px;height:30px"'}

%label 邮政编码%input.form-control{id: 'zipcode', name: 'zipcode', style: 'margin-bottom: 10px;font-size:13px;height:30px"'}

.行 %br %br %input.btn.btn-ss-alt.btn-lg{type: "submit", name: "commit", style: "margin-bottom:20px;float:right;margin-right: 15px;padding:10px 72px ;"}```

SmartyStreets 插件只适用于第一种形式，不适用于第二种。


var liveaddress = $.LiveAddress({
键:#{ENV['SMARTY_STREETS']},
调试:真，
地址:[{
街道:'#street'，
城市:'#city'，
状态:'#state'，
邮政编码:'#zipcode'
}]
});


Answer 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'
    }]
});