How to switch off address auto completion in v 3.3.0

Support
#1

I want to update my snipcart version and I don’t want buggy auto completion form. How can I switch to normal address inputs? I want them to be shown by default, not only after clicking “I can’t see my address”.

1 Like
#2

Ok, I found solution in Your documentation, sorry for my question.

But there is still one issue - “required” property works properly with all fields, except “address1” field. Why is it so?

#3

Hey @daniel,

Could you provide more details about what is not working with your integration?

Thanks!

#4

I have my adress-fields template edited like below. I added “required” parameter to all of the fields, but it doesn’t work with address1 field.

<address-fields>
    <div>
      <fieldset class="snipcart-form__set">
        <div class="snipcart-form__row">
          <div class="snipcart-form__field snipcart-form__cell--large">
            <snipcart-label
              class="snipcart__font--tiny"
              for="address1"
            >{{ $localize('address_form.address1') }}</snipcart-label>
            <snipcart-input name="address1" required></snipcart-input>
            <snipcart-error-message name="address1"></snipcart-error-message>
          </div>

          <div class="snipcart-form__field snipcart-form__cell--tidy">
            <snipcart-label
              class="snipcart__font--tiny"
              for="address2"
            >{{ $localize('address_form.address2') }}</snipcart-label>
            <snipcart-input name="address2" required></snipcart-input>
            <snipcart-error-message name="address2"></snipcart-error-message>
          </div>
        </div>

		 <div class="snipcart-form__row">
        <div class="snipcart-form__field snipcart-form__cell--large">
          <snipcart-label
            class="snipcart__font--tiny"
            for="city"
          >{{ $localize('address_form.city') }}</snipcart-label>
          <snipcart-input name="city" required></snipcart-input>
          <snipcart-error-message name="city" required></snipcart-error-message>
        </div>
		
		       <div class="snipcart-form__field snipcart-form__cell--tidy">
            <snipcart-label
              class="snipcart__font--tiny"
              for="postalCode"
            >{{ $localize('address_form.postalCode') }}</snipcart-label>
            <snipcart-input name="postalCode" required></snipcart-input>
            <snipcart-error-message name="postalCode"></snipcart-error-message>
          </div>
		  </div>

        <div class="snipcart-form__field">
          <snipcart-label
            class="snipcart__font--tiny"
            for="country"
          >{{ $localize('address_form.country') }}</snipcart-label>
          <snipcart-typeahead type="dropdown" name="country" autocomplete="country"></snipcart-typeahead>
        </div>

		</fieldset>
        </div>
</address-fields>
#5

Hi @daniel,

Here is a working example with your custom template code as-is: Custom <address-fields> template - CodeSandbox

Upon inspection of DOM, we can see that the required attribute is present and the browser handles the field as required. We also have our own backend validation on top of this.

Cheers!