javascript - 为什么点击结帐后无法让脚本继续到下一页并停止重新加载？

Question

我正在创建一个脚本，该脚本在地址字段中至少需要 16 个字符，而在 Shopify 结帐页面的电话字段中恰好需要 10 个字符。

我的问题 - 单击后整个页面刷新/加载，即使在验证所有字段后我也无法继续到下一页。

<script>
   $(document).ready(function() {  
    $('#checkout_shipping_address_address1').attr("minlength",16);
    $('#checkout_shipping_address_address1').attr("name",'addressOne');
    $('#checkout_shipping_address_address1').attr("maxlength",200);
    $('#checkout_shipping_address_address1').attr("required",'required');
    $("form.edit_checkout.animate-floating-labels").validate(
      {
        messages: {
          checkout_shipping_address_phone: "Please enter 10 digit phone number",
          addressOne: "Enter an address of minimum 16 characters",
        }
      }
    );
  });
</script>


<script>
  (function($) { 
    window.PhoneNumberInputFormatter=function(){return true;};
    $(document).on('page:load page:change', function() {
      if (Shopify.Checkout.step === 'contact_information') {
        var $phoneField = $('[name="checkout[shipping_address][phone]"]:not([tabindex="-1"])');
            phoneFormatValidated = true;
        $phoneField.removeAttr('data-phone-formatter data-phone-formatter-country-select');
        $phoneField.attr('maxlength', 10);
        $phoneField.attr('minlength', 10);
        $phoneField.attr('required', 'required');
        $phoneField.attr('name', 'checkout_shipping_address_phone');
        $phoneField.keypress(function(event){
      if (event.which != 48 && (event.which < 47 || event.which > 59))
      {
        event.preventDefault();
        if ((event.which == 46) && ($(this).indexOf('.') != -1)) {
          event.preventDefault();
        }
      }
    });
        function phoneNumberValidation() {
          phoneFormatValidated = true;
          var phoneFieldVal = $phoneField.val();
        }
        if ($phoneField.val() != "") { phoneNumberValidation() };
        $phoneField.on('blur', phoneNumberValidation);
        $('[data-step] form [type="submit"]').on('click', function(event) {
          event.preventDefault();
          phoneNumberValidation();
          if (phoneFormatValidated) {
            $('[data-step] form').trigger('submit');
          }
        });
        $('[data-step] form').on('keypress', function(e) {           
          if (e.keyCode === 13) {
            e.preventDefault();
            $('[data-step] form [type="submit"]').trigger('click');
          }
        });
      }
    });
  })
  (Checkout.$);
</script>

PS - 我是 JS/JQuery 的新手。

谢谢你。

标签： javascriptjqueryformsshopify