Autocomplete Address Validation

Hi all,

I’m using the Autocomplete address input field on my Wix form.

I’m facing one massive issue with autocomplete and its when
-My users tend to type half their address in and submit the form. The problem here is the only validation comes from the required field option I ticked “yes” to. Because the field is not empty, even though the address is half filled in, the form accepts it as valid input.

So any ideas on how I can establish a
-RegEx pattern validation like the other input text fields have; or
-Force users to pick an option from the list of options that Google suggests?

I’m assuming a regex pattern might be doable, but no idea how to inject the relevant code to make that happen.

I bow to the Wix gurus who can guide me in the right direction!

Thanks,
B

Anyone able to assist here please?

You can validate according to the AddressInput’s value property. As the docs state: " Site visitor selects one of the Google address suggestions: The Address.formatted property and all relevant Address properties that correspond to the selected Google address will contain data. "

I tried a quick experiment… I added an onChange() event to an AddressInput element, and I get the value and display to the console, like this:

export function addressInput1_change(event) {
    let address = $w("#addressInput1").value;
    console.log('change address', address); 
}

Upon inspection of the value, if I enter in an address (free text), only the Address.formatted property has a value and all other fields are undefined. However, when I select one of the suggested addresses, all of the other fields (e.g. country, location) are populated. This can be used to validate the address.

What you could do if an user forgets to click or select the suggested address, is force a selection of the first address on the list as soon as the user changes focus ( inputElement.onBlur() ), that way at least the closest address would be selected.

And if you want to make sure that the address is right, add a Pop-up container asking for confirmation.

Thanks @yisrael-wix

Is the onchange function the ideal scenario in this case, or the onReady function?

Essentially I want the error message to pop up when they try to click the Submit button. I guess onChange() does it when they click out of the address field right?
I’m happy with that as long as I can get an error message similar to the picture below

$w.onReady(function () {
      let addressLocation = $w("#addressInput1").value.location;
      addressLocation.onCustomValidation( (value, reject) => {
        if( value === 'undefined') ) {
          reject("Address has been incorrectly entered. Please pick from the list");
     }
      } );
    });

exportfunctionaddressInput1_change(event){letaddress=$w("#addressInput1").value;console.log('change address',address);}


The above is what I tried so far. As far as I can tell if they enter it incorrectly, the location property would show as ‘undefined’. However I’m not sure how to use the onCustomValidation on a property. I can see it’s meant to be tested on the elementID, but I only want to validate to check if the address.location property is undefined, and if so return an error message.

Is there a way to get around this?

If it isn’t painfully obvious, it’s been years since I worked with Javascript and when I did it was only for a year, so extremely rusty with it.

@Bruno Prado I gave this a try, but nothing was happening when I was typing the input in. I’m assuming I need to enter code in between this function?

export function addressInput1_blur(event) {
    
}


From what I see, the onChange() event handler only triggers when one of the suggestions is selected. However, it seems to me that onCustomValidation() is probably a better way to go.

Note, that onCustomValidation() is a function and not a property. You can set it in the page’s onReady() function, like this:

$w.onReady(function () {
    $w("#addressInput1").onCustomValidation((value, reject) => {
        console.log('customvalidation value', value);
        // do your validation here
    });
});

You can do your validation in this function, which will also take care of displaying a validation error message, etc. See Velo: About Validating User Input with Code and the Custom Validations example for more information.

Thank you @Yisrael, I’m getting somewhere now! :slight_smile:



$w.onReady(function () {
    $w("#addressInput1").onCustomValidation((value, reject) => {
        console.log('customvalidation value', value);
        let address = JSON.parse(JSON.stringify(value));
        let location = address.location;
        console.log('address',location);
        if (value !== undefined && address.location === undefined) {
             reject("Please select an address option only.");
        }
    });
});


This works now for giving an error message when the address isn’t inputted correctly. However I can’t seem to submit the form. I’m getting a 400 Bad Request in the console. Weird, I don’t have any other custom code entered in other than the above.

Thanks for the links too, I’ve been looking at them for over 6 hours now, but your guidance has really gotten me going in the right direction

Think I finally got it working.

JSON.Parse() was causing unknown console errors.

Did some research and tested the below and seems to be working thus far.


$w.onReady(function () {
$w("#addressInput1").onCustomValidation((value, reject) => {
      
let fullAddress = value;

function GetPropertyValue(obj1, dataToRetrieve) {
  return dataToRetrieve
    .split('.') // split string based on `.`
    .reduce(function(o, k) {
      return o && o[k]; // get inner property if `o` is defined else get `o` and return
    }, obj1) // set initial value as object
}

let location = GetPropertyValue(fullAddress, "location");


if (location === undefined) {
             reject("Please select an address option only.");
        }

});
});

Open to hearing a better way to write this out

I’m sorry, can you better explain what you need the user to do?

Hi Bruno,

So the short version is

I have a form, and on that form I have the Autocomplete Address field.

One of the main issues I was facing, was that people were typing an address into that field, but not actually selecting one of the autocomplete suggestions.

So for eg. an address like

12 Wix Avenue, Los Angeles, CA 90039, USA

They would type something like

12 Wix

into the input field, and think oh the first suggestion looks right, and just hit the TAB key and move on to the next field and submit the form.

Unfortunately because they hadn’t actually clicked on the option, all I was receiving was 12 Wix and hence not a proper address.

The code I have suggested last seems to be working so far, but curious to hear how you envisioned the onBlur() function working.

So, I had never used the Address Input from the Editor before, I was playing around and there is no way of using custom validation to validate the address because you cannot compare the values, they will always be the same, even after onChange() . Address Inputs also don’t have style properties that we could use to create a custom validation indication. So, the best solution would be this one:

$w.onReady(() => {
    $w('#addressInput1').onChange(({ target: { value } }) => {
        value.location === undefined ? $w('#btnOk').disable() : $w('#btnOk').enable()
    })
})

There is also a delay between the value you select and the input being filled by the selected option, and that gets in the way.

Just check if one of the values properties (not formatted) is undefined, in my example I used the location property, and if it is, disable the button that saves the information (remember to put the button disabled on load). If not, enable the button and everything will be saved correctly.