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?
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.