Search code examples
javascriptformsinputcharactercharacter-limit

Why would JS character limits break in Safari?

I'm doing some character limiting on inputs using JS (because there isn't any other way of doing this on Shopify) and it works great in FF & Chrome but in Safari I get the following error:

SyntaxError: The string did not match the expected pattern.

It refers to the definitions within form: below

document.addEventListener('DOMContentLoaded', function () {
var shippingAddressEl = document.querySelector('.section--shipping-address')
if (shippingAddressEl) {
  var formValidation = {
    els: {
      el: shippingAddressEl,
      form: {
        firstname: shippingAddressEl.querySelector('input[name="checkout[shipping_address][first_name]"]:not([data-honeypot="true"]'),
        lastname: shippingAddressEl.querySelector('input[name="checkout[shipping_address][last_name]"]:not([data-honeypot="true"]'),
        company: shippingAddressEl.querySelector('input[name="checkout[shipping_address][company]"]:not([data-honeypot="true"]'),
        addressLine1: shippingAddressEl.querySelector('input[name="checkout[shipping_address][address1]"]:not([data-honeypot="true"]'),
        addressLine2: shippingAddressEl.querySelector('input[name="checkout[shipping_address][address2]"]:not([data-honeypot="true"]'),
        city: shippingAddressEl.querySelector('input[name="checkout[shipping_address][city]"]:not([data-honeypot="true"]'),
        postcode: shippingAddressEl.querySelector('input[name="checkout[shipping_address][zip]"]:not([data-honeypot="true"]'),
        phone: shippingAddressEl.querySelector('input[name="checkout[shipping_address][phone]"]:not([data-honeypot="true"]')
      }
    }
  }
});

How can this error be fixed?

Solution

  • You are missing a closing parenthesis in every line:

    var formValidation = {
  els: {
    el: shippingAddressEl,
    form: {
      firstname: shippingAddressEl.querySelector('input[name="checkout[shipping_address][first_name]"]:not([data-honeypot="true"])'),
      lastname: shippingAddressEl.querySelector('input[name="checkout[shipping_address][last_name]"]:not([data-honeypot="true"])'),
      company: shippingAddressEl.querySelector('input[name="checkout[shipping_address][company]"]:not([data-honeypot="true"])'),
      addressLine1: shippingAddressEl.querySelector('input[name="checkout[shipping_address][address1]"]:not([data-honeypot="true"])'),
      addressLine2: shippingAddressEl.querySelector('input[name="checkout[shipping_address][address2]"]:not([data-honeypot="true"])'),
      city: shippingAddressEl.querySelector('input[name="checkout[shipping_address][city]"]:not([data-honeypot="true"])'),
      postcode: shippingAddressEl.querySelector('input[name="checkout[shipping_address][zip]"]:not([data-honeypot="true"])'),
      phone: shippingAddressEl.querySelector('input[name="checkout[shipping_address][phone]"]:not([data-honeypot="true"])')
    }
  }
}

    This should work.