Search code examples
javascriptjquerysmartystreets

How to verify default values with LiveAddress jquery plugin?

I'm using Smarty Street's LiveAddress jQuery plugin (2.4 branch). Sometimes the address will already be provided when the form loads. What's the best way to have a pre-loaded address verify on page load?

e.g. form:

<input id="address" value="20 N. Main St" />
<input id="city" value="Greenville" />
<input id="state" value="SC" />
<input id="zip" value="29601" />

e.g. javascript:

// set up Address Verification Service
var liveaddress = $("#DeliveryAddress").LiveAddress({
    key: "0000000000",
    autoVerify: true,
    submitVerify: false,
    invalidMessage: "Address Not Found. Click X to continue anyway.",
    addresses: [{
        id: 'DeliveryAddress',
        street: '#address',
        city: '#city',
        state: '#state',
        zipcode: '#zip'
    }]
});

So far I have tried:

liveaddress.verify( 'DeliveryAddress' );

This will indeed verify the address but not update the verify button so obviously it's not firing all the events. This is what debug mode shows:

LiveAddress API jQuery Plugin version 2.4.11 (Debug mode)
Manually mapping fields given this data: 
Finished mapping address with ID: DeliveryAddress
EVENT: FieldsMapped (Fields mapped to their respective addresses)
EVENT: VerificationInvoked (Address verification invoked)
EVENT: RequestSubmitted (Request submitted to server)
EVENT: ResponseReceived (Response received from server, but has not been inspected)
EVENT: AddressWasValid (Response indicates input address was valid)
EVENT: AddressAccepted (Address marked accepted)
EVENT: Completed (All done)
EVENT: MapInitialized (Mapped fields have been wired up to the window, document, and UI)

Actually clicking the verify button fires the same events.

Final solution from Matt's answer:

liveaddress.on("MapInitialized", function(event, data, previousHandler) {
    previousHandler(event, data);
    liveaddress.verify( 'DeliveryAddress' );
});
Solution

  • Two things to check:

    1. The change event needs to be fired after the value of any field changes programmatically. Make sure the change event is invoked after populating the field

    2. It looks, from your debug output, like the verification is happening before the UI is intialized; make sure everything is finished initializing before doing verification.