title: Why can't get script to proceed to next page and stop reload after checkout click?
body: <p>I am creating a script which takes a minimum of 16 characters in Address field and exactly 10 in the Phone field in Shopify checkout page.</p>
  <p>My issue's - The entire page refresh's/load's after click &amp; Even after validating all the fields i cant proceed to next page.</p>
  <pre><code>&lt;script&gt;
     $(document).ready(function() {  
      $('#checkout_shipping_address_address1').attr(&quot;minlength&quot;,16);
      $('#checkout_shipping_address_address1').attr(&quot;name&quot;,'addressOne');
      $('#checkout_shipping_address_address1').attr(&quot;maxlength&quot;,200);
      $('#checkout_shipping_address_address1').attr(&quot;required&quot;,'required');
      $(&quot;form.edit_checkout.animate-floating-labels&quot;).validate(
        {
          messages: {
            checkout_shipping_address_phone: &quot;Please enter 10 digit phone number&quot;,
            addressOne: &quot;Enter an address of minimum 16 characters&quot;,
          }
        }
      );
    });
  &lt;/script&gt;
  
  
  &lt;script&gt;
    (function($) { 
      window.PhoneNumberInputFormatter=function(){return true;};
      $(document).on('page:load page:change', function() {
        if (Shopify.Checkout.step === 'contact_information') {
          var $phoneField = $('[name=&quot;checkout[shipping_address][phone]&quot;]:not([tabindex=&quot;-1&quot;])');
              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 &amp;&amp; (event.which &lt; 47 || event.which &gt; 59))
        {
          event.preventDefault();
          if ((event.which == 46) &amp;&amp; ($(this).indexOf('.') != -1)) {
            event.preventDefault();
          }
        }
      });
          function phoneNumberValidation() {
            phoneFormatValidated = true;
            var phoneFieldVal = $phoneField.val();
          }
          if ($phoneField.val() != &quot;&quot;) { phoneNumberValidation() };
          $phoneField.on('blur', phoneNumberValidation);
          $('[data-step] form [type=&quot;submit&quot;]').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=&quot;submit&quot;]').trigger('click');
            }
          });
        }
      });
    })
    (Checkout.$);
  &lt;/script&gt;
  </code></pre>
  <p>P.S - I am new to JS/JQuery.</p>
  <p>Thank you.</p>