check number and post code real time

validation-japanese-postcode.js

  const zipInput = document.getElementById("checkout_shipping_address_zip")
  const numberInput = document.getElementById("checkout_shipping_address_phone")
  const submitButton = document.getElementById('continue_button')
  const submitText = submitButton.children[0]

  let zipError = document.createElement('p')
  zipError.setAttribute('id', 'error-for-zip')
  zipError.setAttribute('class', 'field__message field__message--error')
  zipError.innerHTML = "日本の有効な郵便番号を入力してください"

  let numberError = document.createElement('p')
  numberError.setAttribute('id', 'error-for-phone')
  numberError.setAttribute('class', 'field__message field__message--error')
  numberError.innerHTML = "有効な電話番号を入力してください"

  zipInput.addEventListener("change", (event) => {
    const value = event.target.value
    if (!value.match(/^\d{3}-\d{4}$/)) {
      zipInput.closest('div[data-address-field="zip"]').classList.add('field--error')
      zipInput.closest('.field__input-wrapper').appendChild(zipError)
      submitButton.disabled = true
      submitText.style.textDecoration = 'line-through'
    } else {
      submitButton.disabled = false
      submitText.style.textDecoration = 'none'
    }
  })

  numberInput.removeAttribute('data-phone-formatter')

  numberInput.addEventListener("change", (event) => {
    const value = event.target.value
    if (!value.match(/^\d{3}-\d{4}-\d{4}$/)) {
      numberInput.closest('div[data-address-field="phone"]').classList.add('field--error')
      numberInput.closest('.field__input-wrapper').appendChild(numberError)
      submitButton.disabled = true
      submitText.style.textDecoration = 'line-through'
    } else {
      submitButton.disabled = false
      submitText.style.textDecoration = 'none'
    }
  })