Why would JS character limits break in Safari?

Question

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?

tom_mai78101 · Answer 1 · 2018-05-01T13:01:36.503

1

EDIT: I found out why:

You're missing a ) in pretty much every value inside your form object:

city: shippingAddressEl.querySelector('input[name="checkout[shipping_address][city]"]:not([data-honeypot="true"]'),

edited May 01 '18 at 13:01

answered May 01 '18 at 12:55

tom_mai78101

2,383
2
32
59

No, the quotes are not needed to create a JSON. Try `var json = { a: 1, b: 2 }`. It works – Jagdeep Singh May 01 '18 at 12:59
@JagdeepSingh Updated my post. Thanks again. – tom_mai78101 May 01 '18 at 13:03
@JagdeepSingh that is an *object* - JSON is a string – VLAZ May 01 '18 at 13:06
OMG, its always the simplest of things! Completely missed it! Thanks! – egr103 May 01 '18 at 13:06
@tom_mai78101 I meant that for the `to create a JSON` comment. JSON stands for JavaScript Object Notation and it's a string type, while `{ a: 1, b: 2 }` is a plain object and **not** JSON. – VLAZ May 01 '18 at 13:10
@vlaz Ah I see. Sorry. – tom_mai78101 May 01 '18 at 13:25

score 0 · Accepted Answer · answered May 01 '18 at 13:05

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.

OMG, its always the simplest of things! Completely missed it! Thanks! — egr103, May 01 '18 at 13:06

Why would JS character limits break in Safari?

2 Answers2