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?

Answer 1

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.

1. 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.
2. 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