Phone number validation on checkout page

Solved
Kumar2573
Pathfinder
92 5 9

<script>

(function($) {

window.PhoneNumberInputFormatter=function(){return false;};

$(document).on('page:load page:change', function() {

if (Shopify.Checkout.step === 'contact_information') {

var $phoneField = $('[name="checkout[shipping_address][phone]"]:not([tabindex="-1"])'),

phoneFormatValidated = false;

// Remove automatic formatting triggers

$phoneField.removeAttr('data-phone-formatter data-phone-formatter-country-select');

// Set maxium size

$phoneField.attr('maxlength', 20);

function phoneNumberValidation() {

phoneFormatValidated = false;

 

var phoneFieldVal = $phoneField.val();

 

// Strip out any non-numeric characters

var formattedPhoneValue = phoneFieldVal.replace(/[^0-9]/g, '');

$phoneField.val(formattedPhoneValue);

phoneFormatValidated = true;

}

// Run validator if there is a previously cached phone number

if ($phoneField.val() != "") { phoneNumberValidation() };

// Run validator when the user has switched focus from the phone field

$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>

 

Example 2

 

<script>

(function($) {

$(document).on('page:load page:change', function() {

var $phoneField;

var errorClass = 'field--error-plus-dynamic';

var errorMessageSelector = '.field__message--error-plus-dynamic';

// Check input for character limit and remove letters

var validatePhoneNumber = function(phoneField) {

var minChars = {{ settings.plus_phone_min_chars }};

var maxChars = {{ settings.plus_phone_max_chars }};

var errorMessage = "{{ 'plus.checkout.phone_field_error' | t: min_chars: settings.plus_phone_min_chars, max_chars: settings.plus_phone_max_chars }}";

var numbers = phoneField.val().match(/(\d)/g) || [];

var numbersLength = numbers.length;

 

// Only allow + and numbers

var allowedChars = phoneField.val().match(/(\d|\+)/g) || [];

var phoneFieldVal = phoneField.val;

// Remove non-allowed characters from phone number

phoneField.val(allowedChars.join(''));

if (numbersLength !== 0 && numbersLength < minChars || numbersLength > maxChars) {

// Not enough characters, show error on input.

if (!phoneField.hasClass(errorClass)) {

phoneField.addClass(errorClass);

phoneField.closest('[data-address-field]').after("<p class='field__message field__message--error-plus-dynamic'>"+ errorMessage +"</p>");

}

return false;

} else {

// Phone number is valid. Remove errors and continue.

phoneField.removeClass(errorClass);

phoneField.closest('[data-address-field]').nextAll(errorMessageSelector).remove();

return true;

}

}

if (Shopify.Checkout.step === 'contact_information') {

var $phoneField = $('[name="checkout[shipping_address][phone]"]:not([aria-hidden="true"])');

// Check for enter keypress on form and click button instead.

$('[data-step] form').on('keypress', function(e) {

if (event.keyCode === 13) {

e.preventDefault();

$(this).find('[type="submit"]').trigger('click');

}

});

// Handle form submit by validating button click.

$('[data-step] form [type="submit"]').on('click', function(e) {

e.preventDefault();

if (validatePhoneNumber($phoneField)) {

$('[data-step] form').trigger('submit');

}

});

// Validate phone number when modified

$phoneField.on('input', function() {

validatePhoneNumber($(this));

});

}

});

})(Checkout.$);

</script>

0 Likes
Kumar2573
Pathfinder
92 5 9

That is working for me.

0 Likes
kkphpdots
Tourist
3 1 0

This is an accepted solution.

Where can I put this javascript code, I mean in which file I can add this code so it will allow me to validate the phone number on the checkout page?

0 Likes
Kumar2573
Pathfinder
92 5 9

This is an accepted solution.

Please put this code on checkout page

0 Likes
kkphpdots
Tourist
3 1 0

There is not checkout page liquid file on my Shopify store.

0 Likes
suyash1
Shopify Partner
3015 329 504

@kkphpdots - you need to be shopify plus or gold member to get checkout file, please contact shopify support

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
kkphpdots
Tourist
3 1 0
Thank you for your reply.
0 Likes