Search code examples
javascriptjquerysmartystreets

How can I apply SmartyStreets validation to two forms in the same page?


``` .col-md-6 %h3 US Address

%form.form-horizontal %label Street Address %input.form-control{id: 'street', name: 'street', style: 'margin-bottom: 10px;font-size:13px;height:30px"'}

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

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

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

.row %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 International Address

%form.form-horizontal %label Street Address %input.form-control{id: 'street', name: 'street', style: 'margin-bottom: 10px;font-size:13px;height:30px"'}

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

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

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

.row %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;"} ```

The SmartyStreets plugin is only applying to the first form, no the second.

var liveaddress = $.LiveAddress({ key: #{ENV['SMARTY_STREETS']}, debug: true, addresses: [{ street: '#street', city: '#city', state: '#state', zipcode: '#zipcode' }] });


Solution

  • Easy, just wrap each form within a form tag and assign a distinct name (or id) to each field. The plugin will pick it up. Here's an example with two forms using custom field mapping:

    http://jsfiddle.net/p02qxh0L/69/

    Here is an example with 16 forms on the same page using auto-mapping:

    https://smartystreets.com/docs/plugin/examples

    Example 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>  
        
    

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