Why can't get script to proceed to next page and stop reload after checkout click?

PinkHat
New Member
2 0 0

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.

My issue's - The entire page refresh's/load's after click & Even after validating all the fields i cant proceed to next page.

<script>
       $(document).ready(function() {  
         //<!-- Address and phone Limit -->
        $('#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');
        //data form validation
        $("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);
            // Run the function when the continue button is clicked or the enter key is pressed
            $('[data-step] form [type="submit"]').on('click', function(e) {
              e.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>
    


P.S - I am new to JS/JQuery.

Thank you.

 

0 Likes