Deactivating Smarty Streets functionality

Question

I have a form with which I am using Smarty Streets Live Address validation. In general it works well. In the case where a user has begun entering address information, though, the Live Address validation can get in the way. The most specific problem encountered is in the case where address information has been entered but the user chooses to cancel the form. The Live Address validation takes precedence of operation and blocks attempts to deactivate the validation and clear the form.

A fiddle example of the issue can be found here.

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

When no data has been entered the click event works as desired, but once address information has been entered the Live Address validation prevents the event handler from firing.

On the click of the cancel button the form should be cleared or returned to the previous page, but instead the Live Address validation takes over and blocks all other actions.

How can the Live Address validation be deactivated on the button click event?

I've updated the fiddle example with a submit button as suggested and it seems to work as desired. Thanks! — lynnjwalker, May 12 '15 at 21:46
Hey @lynnjwalker I provided an alternative solution using an A link (instead of a button) and included logic to disable if editing a preexisting address (that's already been verified) & auto-enabling verification if address is modified. (I use FontAwesome in my button and change the fa-toggle-on/off class to match the status.) — James Moberg, Dec 02 '15 at 16:04

camiblanch · Accepted Answer · 2016-09-23T15:44:33.350

Your cancel button is mapped as the "submit" button on the plugin side. This means that the plugin recognizes that button to invoke verification when clicked. Verification will happen before actually performing any other actions which is what you are seeing. There are two solutions to working around this.

Add another button to your form. The plugin looks for the submit button with this selector "[type=submit], [type=image], [type=button]:last, button:last" Line 48. If you add another button then your cancel button will be free and verification will not be invoked when clicked.
When you configure the plugin, set submitVerify to false. See the documentation here. This will disable verification for all buttons on your form. Verification will only happen when you click the plugin checkmark bubble.

Note: I work for SmartyStreets

James Moberg · Answer 2 · 2015-12-02T16:33:46.210

It wasn't working if the last element was a button (even if I used event.stopPropagation();, so I used an A link.

To do this, I mapped the address fields, assigned an address ID and then used the activate() & deactivate() functions. This enabled me to allow an admin user to bypass the validation and post the form without entering anything. It checks for the visibility of the .smarty-tag checkmark to determine if it should activate or deactivate the validation.

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

Deactivating Smarty Streets functionality

2 Answers2